商城网站建设如何,企业投资建设公益性项目,网站开发与规划就业前景,wordpress防截屏改变dom样式有两种做法#xff0c;一种是通过domNode.style.xxx ,给domNode加上内置样式#xff0c;这种方式如果需要的样式比较多#xff0c;就只好一个个增加#xff0c;比较麻烦#xff0c;还有一种方式比较聪明#xff0c;通过在css里预设好几种不同样式… 改变dom样式有两种做法一种是通过domNode.style.xxx ,给domNode加上内置样式这种方式如果需要的样式比较多就只好一个个增加比较麻烦还有一种方式比较聪明通过在css里预设好几种不同样式的类然后需要更改某domNode的样式时可以修改domNode的className这是比较聪明的一种做法。 但是如果是某种类型的domNodes全都要改某种样式这两种做法都需要遍历元素对每一个进行操作一次今天空想冒出个想法能不能动态创建一个style节点然后通过.innerHTML给这个style节点填充css内容呢var newNode document.creatElement(style);document.body.appendChild(newNode);newNode.innerHTML body{background:#000};按这个设想写了代码结果在FF下执行正常IE下没有出现我想要的效果。于是调试了半天把.innerHTML换成.firstChild.nodeValue依然不行。最终发现一直到document.body.appendChild(newNode);这一步都可以顺利执行但是到了赋值这一步就不行了。于是换了种方法直接在body里写上一个style typetext/css id test/style标签然后用document.getElementById(test).innerHTML body{background:#000;}来写不动态创建节点了结果还是在IE下不行。于是想偷偷骗浏览器一下试试不直接把style结点赋值改成div id test/divdocument.getElementById(test).innerHTML style typetext/cssbody{background:#000}/style;还是不行哭 T_T最终结论FF下style结点是可读写的而IE下style结点是只读的。 后记 今天找到一篇文章讲的东西和我这篇文章讲的相似但那篇文章里提到了ie下修改style标签的方法有点生僻。转载过来。原文地址http://hi.baidu.com/chenlinwei/blog/item/4a287f0a664c521995ca6b41.html关于STYLE标签在FF,IE下的不同操作 有时候要动态的在页面中调整样式需要用到对style idstyleHandle .main a{text-decoration:none;}/style标签的操作这个在firefox下比较好办以jquery举例只要$(#styleHandle).html(内容) 就可以了但是在IE中这样是不可以的。IE对Style的处理很严格不像其他普通的标签。这里是IE对style标签操作的代码 var obj document.styleSheets[document.styleSheets.length-1]; 获得style的引用 var rules obj.rules || obj.cssRules; var selectorText; var styleObj {}; for(var i0;orules[i];i){ selectorText o.selectorText; 这个selectorText 就是 style里面的每个样式的名称 styleObj[selectorText] o.style; 每个样式具体的样式map }操作到这里比如我们现在要修改 开头所指的那个style中 .main a 的样式将text-decoration设为underline设置如下styleObj [.main A].textDecoration underline;注意这里的A要大写不管你在style里面写的是大写还是小写IE都会将a转换为大写。完整测试代码:!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlnshttp://www.w3.org/1999/xhtmlheadmeta http-equivContent-Type contenttext/html; charsetutf-8 /title无标题文档/titlestyle typetext/css!--* {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;}.height {height:200px;}.width {width:200px;}.color{background-color:#CCCCCC;}.object_text{background-color:#CCCCCC;text-decoration:none; color:#377AD9; border-bottom: 1px none #377AD9;}.object_text a:hover{background-color:#CCCCCC;text-decoration:none; color:#377AD9; border-bottom: 1px none #377AD9;}--/style/headbodyhr /Color:br /input typeradio nameradio idradio value#ff0000 οnclickc(this) /#ff0000input typeradio nameradio idradio2 value#ff00ff οnclickc(this) /#ff00ffinput typeradio nameradio idradio3 value#cc6600 οnclickc(this) /#cc6600 input typeradio nameradio idradio4 value#000000 οnclickc(this) /#000000hr /Width:input typetext nametextfield idtextfield οninputw(this) onpropertychangew(this) /Height:input typetext nametextfield2 idtextfield2 οninputh(this) onpropertychangeh(this) /table border1tr td classheight width color/td td classheight width color/td td classheight width color/td td classheight width color/td td classheight width color/td/tr/table/body/htmlscript languagejavascript typetext/javascriptvar o;var obj document.styleSheets[0];var rules obj.rules || obj.cssRules;var styleObj {};var selectorText,readonly,style,cssText;for(var i0;orules[i];i){selectorText o.selectorText;//readonly new String(o.readOnly); IE//cssText o.cssText; FFstyle o.style;alert(selectorText);document.write(selectorText.fontcolor(#ff0000),br /);styleObj[selectorText] style;}function c(obj){if(obj.checked)styleObj[.color].backgroundColor obj.value;}function h(obj){try{styleObj[.height].height parseInt(obj.value) px;}catch(e){}}function w(obj){try{alert(styleObj[.object_text A].color);styleObj[.width].width parseInt(obj.value) px;}catch(e){ alert(e);}}/script 转载于:https://www.cnblogs.com/cly84920/archive/2009/03/06/4427030.html
