如何选择#document内元素修改CSS？如何移除iframe中SVG的icon并重置宽高？

问题1：如何选择#document内的元素修改CSS样式？ #

首先得明确：你看到的#document其实是iframe内部的文档对象。要操作它里面的元素，核心前提是iframe的源和你的父页面同源（协议、域名、端口完全一致）——这是浏览器的同源安全策略限制，不同源的话浏览器会直接阻止你访问或修改内部内容。

如果满足同源条件，你可以通过JS来实现操作：

• 先获取目标iframe元素：const iframe = document.getElementById('_id_jfuzvdmpi');
• 拿到iframe内部的文档对象：const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
• 用常规DOM选择器定位元素，比如选中那个带icon类的SVG：const targetIcon = iframeDoc.querySelector('.icon');
• 接下来就可以直接修改样式，比如：targetIcon.style.width = '0'; targetIcon.style.height = '0';，或者给它添加预定义的CSS类：targetIcon.classList.add('hidden-icon');（需要提前在iframe内部的样式中定义好.hidden-icon的规则）

要是iframe和父页面不同源，那真的没办法直接操作——浏览器的安全机制就是为了防止跨域恶意操作，这种情况只能联系iframe的提供方修改他们的代码，或者寻找其他业务层面的替代方案。

问题2：调整iframe内SVG icon宽高（或隐藏）的解决方案 #

先看你当前的CSS代码，有两个明显的错误：

icon{ width=26; height=26}

1. 选择器错误：你的SVG标签的class是icon，所以正确的类选择器应该是.icon（以点号开头），直接写icon会匹配<icon>标签，根本不是你要找的SVG元素。
2. 语法错误：CSS的属性和值之间必须用冒号:分隔，不是等号=，而且值最好加上单位（比如px），正确写法是width: 26px;。

另外，你提到想把宽高设为null？CSS里没有null这个有效值，如果你想隐藏这个icon，有几种更实用的方式：

• 直接设宽高为0并隐藏溢出：.icon { width: 0; height: 0; overflow: hidden; }
• 直接让元素消失（不占空间）：.icon { display: none; }
• 让元素透明但保留占位：.icon { visibility: hidden; }

还是要再强调一遍：如果iframe跨域，外部的CSS完全无法影响内部元素。这种情况下要么用前面说的同源JS操作方法（前提是同源），要么只能让iframe的提供者修改他们的代码。

如果是同源场景，你也可以通过JS给iframe注入样式：

const iframe = document.getElementById('_id_jfuzvdmpi');
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
const styleTag = document.createElement('style');
styleTag.textContent = '.icon { width: 0; height: 0; overflow: hidden; }';
iframeDoc.head.appendChild(styleTag);

内容的提问来源于stack exchange，提问作者jaswani