coding-style 相关问题

问题我有以下代码：。我的风格 { 颜色：#FF0000； } 问题我有以下代码： <html> <head> <style id="ID_Style"> .myStyle { color : #FF0000 ; } </style> </head> <body> <p class="myStyle"> Hello World ! </p> </body> </html> 而我想通过JavaScript修改<style>的内容预期的解决方案第一个解决方案是使用 style 元素的 innerHTML 属性（通过它的 id 检索），但是当它在 Firefox 上工作时，它在 Internet Explorer 7 上失败。所以，我使用了纯 DOM 方法，即创建一个名为 style 的元素，一个包含所需内容的文本节点，并将该文本节点附加为样式节点的子节点，等等。它也失败了。根据MSDN，<style>元素有一个innerHTML属性，根据W3C，<style>元素是一个HTMLStyleElement，它派生自HTMLElement，派生自Element，派生自Node，有appendChild方法。它似乎表现得好像 <style> 元素的内容在 Internet Explorer 上是只读的。问题所以问题是：有没有办法在Internet Explorer上修改<style>元素的内容？虽然当前的问题是 IE7，但如果可能的话，跨浏览器的解决方案会很酷。附录来源：样式元素（MSDN）：http://msdn.microsoft.com/en-us/library/ms535898.aspx HTMLStyleElement (W3C)：http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-16428977 完整的测试代码如果你想重现你的问题，你可以使用这个测试代码： <html> <head> <style id="ID_Style"> .myStyle { color : #FF0000 ; } </style> <script> function replaceStyleViaDOM(p_strContent) { var oOld = document.getElementById("ID_Style") ; var oParent = oOld.parentNode ; oParent.removeChild(oOld) ; var oNew = document.createElement("style") ; oParent.appendChild(oNew) ; oNew.setAttribute("id", "ID_Style") ; var oText = document.createTextNode(p_strContent) ; oNew.appendChild(oText) ; } function replaceStyleViaInnerHTML(p_strContent) { document.getElementById("ID_Style").innerHTML = p_strContent ; } </script> <script> function setRedViaDOM() { replaceStyleViaDOM("\n.myStyle { color : #FF0000 ; }\n") } function setRedViaInnerHTML() { replaceStyleViaInnerHTML("\n.myStyle { color : #FF0000 ; }\n") } function setBlueViaDOM() { replaceStyleViaDOM("\n.myStyle { color : #0000FF ; }\n") } function setBlueViaInnerHTML() { replaceStyleViaInnerHTML("\n.myStyle { color : #0000FF ; }\n") } function alertStyle() { alert("*******************\n" + document.getElementById("ID_Style").innerHTML + "\n*******************") ; } </script> </head> <body> <div> <button type="button" onclick="alertStyle()">alert Style</button> <br /> <button type="button" onclick="setRedViaDOM()">set Red via DOM</button> <button type="button" onclick="setRedViaDOM()">set Red via InnerHTML</button> <br /> <button type="button" onclick="setBlueViaDOM()">set Blue via DOM</button> <button type="button" onclick="setBlueViaInnerHTML()">set Blue via InnerHTML</button> </div> <p class="myStyle"> Hello World ! </p> </body> </html> 谢谢！编辑请注意，将 <style> 元素从 <head> 移动到 <body> 不会改变问题。动态生成 CSS 有其优势。如果您想在 IE 中设置样式元素的 innerHTML，请使用 styleSheet.cssText。例如：http://jsbin.com/awecu4 <!doctype html> <script> var style = document.createElement('style'), script = document.getElementsByTagName('script')[0], styles = '#test{background:green;}'; script.parentNode.insertBefore(style, script); try{style.innerHTML = styles;} //IE fix catch(error){style.styleSheet.cssText = styles;} </script> <div id=test>Div with id of test</div> 今天，在所有浏览器（包括我相信 IE9+）中，您可以在 textContent 元素上设置 style 的值，它会按照您想要的方式工作，包括选择器中的 >。在设置风格上，CSSStyleSheet.replaceSync()方法管用。还有.insertRule。如果您想从更大的字符串中插入，只需执行const mystylesheet = new CSSStyleSheet(".myClass{color:"green" ...}"); const stylesheet = new CSSStyleSheet(); stylesheet.replaceSync("h1 { color: blue; }"); document.adoptedStyleSheets = [stylesheet]; h1 { color: red; } <h1>Hello World</h1>

html dom coding-style

回答 3 投票 0

哪种编码方式更好？

我想将有关人员的信息存储在列表中。但是问题是people的索引是从1开始的。所以我想知道哪个更适合编码： l[person's_index] = 数据 l[person's_index -...

coding-style

回答 0 投票 0

我是否应该将css直接导入到某个视图的html中？

我一直在这个个人项目中工作，其中有多个 HTML（视图）和 CSS 文件。到目前为止，我一直在将所有 CSS 文件导入到一个 global.css 中，并导入这个 global.css int ...

html css import frontend coding-style

回答 1 投票 0

如何响应式在背景中显示5条竖线？然后 3 个平板电脑模式和 2 个智能手机模式？使用 CSS

我想做的就是这个网站的背景：条纹网站背景中的5条垂直线等距，宽度固定为1300px然后响应式自适应800...