位置: 编程技术 - 正文
JavaScript CSS修改学习第三章 修改样式表(用js改变css样式)
编辑：rootadmin请注意代码和传统的DHTML的区别。在DHTML你通过直接修改页面上的特定元素来改变样式，而这里的代码修改的是样式表。在这里查看W3C DOM-CSS的兼容性列表。定义 一个页面总是包含一个或者几个样式表，一个样式表里面包含一条或者几条规则，一条规则里有详细的样式声明。这个页面的样式表如下： 我们的目的是修改pre.test的白色背景为#EEF0F5。 样式表 所有外链或者内嵌的样式表都能通过document.styleSheets数组访问。quirksmode.css，这个网站的通用样式表保存在document.styleSheets[0]里。上面这段特别的样式表段就保存在document.styleSheets[1]。我们就在这段代码上进行测试。 cssRules[]和rules[] 一条规则就是一个或者多个元素的一组声明。这里有两种访问规则的方法。W3C坚持使用cssRules[]，而微软坚持rules[]。两种方法都是用索引数字，第一条规则就是(css)Rules[0]，第二条就是(css)Rules[1]等等。 现在theRules就包含了所有的样式规则。规则的数目 这是样式表: 在你看来可能是4条规则：@import 然后是p,h2,h3，接着pre.test + *，最后是pre.test。然而浏览器可不这么看。 Safari看见的是4条规则： 0、undefined 1、P 2、PRE.test[CLASSS~="test"]+* 3、PRE.test[CLASSS~="test"] 注意大写 IE7beta3看见了5条： 0、P 1、H2 2、H3 3、PRE.test + * 4、PRE.test 注意大写 Mac IE也看见5条： 0、P 1、H2 2、H3 3、PRE.test * （注意没有+号） 4、PRE.test 注意大写 Mozilla和Opera 9看见4条： 0、undefined 1、p,h2,h3 2、pre.test + * 3、pre.test 注意小写 非常棒的混乱！ 1、IE认为p,h2,h3是三条而不是一条规则，而Safari则只取p。知道现在我才知道这是一种不正确的写法。 2、Mac IE把选择器改成了pre.test *，这样含义就非常不一样了。非常严重的问题。 3、除了Safari给pre.test添加了不必要的表达式以外，这个是支持最好的了。 所以要访问pre.test在Safari和Mozilla里需要cssRules[3]，而IE是rules[4]，早期的Mozilla是cssRules[5]。很可爱，不是么？ 没有关键字 所以如果使用索引值的话问题就非常严重。我们希望能这样访问： document.styleSheets[1].cssRules['PRE.test']这样我就能访问pre的样式表规则了。但是W3C或者其他浏览器貌似不需要这样的访问样式表的方法。但是所有的文档在这个问题上都保持沉默。 这个失败意味着你基本上没法访问规则了。 样式声明 假设我们已经访问了一条规则。现在需要改变其中一条声明。表达式如下： W3C的方法是： 因为style.color简单的多，所以我不想用这个seProperty()。 例子 打算改变pre的颜色，代码如下： 为了保证能用，我把pre的规则写在最后一条。很丑，但是这是唯一的办法： 翻译地址： 转载请保留以下信息 作者：北玉(tw:@rehawk)
推荐整理分享JavaScript CSS修改学习第三章 修改样式表(用js改变css样式)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:js如何修改style,js 修改 css,js如何修改style,js如何修改css样式,js如何修改style,js 修改 css,js 修改 css,js如何修改style,内容如对您有帮助，希望把文章链接给更多的朋友！
JavaScript CSS 修改学习第四章 透明度设置 这里是测试页。在JavaScript里面设置透明度我用下面的代码来设置透明度：functionsetOpacity(value){testObj.style.opacity=value/;testObj.style.filter='alpha(opacity='+value*
JavaScript CSS修改学习第五章 给“上传”添加样式 问题在一个网站中可能我的输入框式下面这样的：设计者可能想让上传部分也像这样然后再添加一个select按钮。但是当我想把普通的输入框改为上传框
JavaScript CSS修改学习第六章 拖拽 当示例的box上的#链接处于活动状态的时候（不论是用tab然后点击enter或者使用鼠标点击）这个元素就能够通过方向键拖拽。然后点击enter或者Esc释放。（
标签: 用js改变css样式
本文链接地址:https://www.jiuchutong.com/biancheng/381860.html 转载请保留说明！
