位置: 编程技术 - 正文

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样式),希望有所帮助,仅作参考,欢迎阅读内容。

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 转载请保留说明!

上一篇:JavaScript CSS修改学习第二章 样式(js 修改 css)

下一篇:JavaScript CSS 修改学习第四章 透明度设置(js中改变css文件中的样式)

  • 个所税包括什么
  • 小微企业的认定标准2023年
  • 可供出售金融资产新准则叫什么
  • 小规模纳税人收入是含税还是不含税
  • 电子发票可以更改备注吗
  • 收回已冲销的坏账分录
  • 可变现净值与公允价值孰低
  • 销售材料应确认的损益是什么意思
  • 购买土地自建厂房的会计处理
  • 购买旧资产如何入账
  • 承包费收入计入什么科目
  • 样品不收钱怎么做会计分录
  • 公司提供职工午餐违法吗
  • 员工入职第一个月交社保吗
  • 定额发票上盖什么章
  • 成立分公司总公司有什么影响
  • 协会核定的税种都有哪些?
  • 水利建设基金的缴费基数是什么
  • 资产负债表季度申报期末余额怎么填
  • 借库存商品贷生产成本这笔会计分录反映的经济业务是
  • 计提养老保险会计分录怎么做
  • 收购报废车有利润吗
  • 贴息收据税前扣除是什么
  • 前期投资费用怎么做账
  • wifi上传速度为0的解决方法
  • win7为什么现在不能用了
  • 不开票收入申报是含税收入吗
  • 劳务费和合同如何分配
  • 个人所得税计算方法及抵扣方法
  • 厂区绿化工程计入什么科目
  • win10平板模式怎么改回来
  • linux 速度
  • 苹果macOSBigSur是什么型号
  • 同一控制下企业合并发生的审计费用计入
  • php+mysql+jquery实现简易的检索自动补全提示功能
  • YOLOv8(n/s/m/l/x)&YOLOv7(yolov7-tiny/yolov7/yolov7x)&YOLOv5(n/s/m/l/x)不同模型参数/性能对比(含训练及推理速度)
  • linux运行c++程序
  • vue的内置组件
  • yolov5加入注意力机制后网络后进行剪枝
  • 查补税款
  • 季度企业所得税会计分录怎么做
  • 小规模租金可以抵税吗
  • 信息技术服务费的税率是多少
  • 小规模纳税人分红要交税吗
  • 一般纳税人发生应税销售行为向购买方收取
  • 小规模纳税人是季度报税吗
  • 预付房租摊销
  • 虚开发票会面临怎么样的后果?
  • 油卡办理需要多久?
  • 一般纳税人租赁不动产增值税税率
  • 债券分期付息到期还本的意思
  • 融资租赁的固定资产可以一次性扣除吗
  • 出口样品的销售好做吗
  • 企业支付宝收款码是进公账吗
  • 认缴款和投资款区别
  • 5000元固定资产一次性计提折旧
  • 登记银行存款日记账的实训心得
  • 复式记账法的特点不包括
  • winxp每次开机都要输入用户名
  • wp7.8升级wp8
  • linux命令pwd是什么意思
  • windowssystem32configsystem 损坏
  • 命令行批量重命名
  • win7系统鼠标指针异常
  • win7怎么cmd
  • win7指令代码
  • unity rpg插件
  • js字符串函数
  • unix linux
  • js选择框全选
  • 数字动画文件格式有哪些
  • 安卓xml存储方式
  • python右斜杠怎么打出来
  • javascript中array的正确写法
  • jQuery EasyUI Pagination实现分页的常用方法
  • python3 re
  • 淄博市税务局投诉电话
  • 内蒙古物业费收取标准2020
  • 曲靖市国家税务局杨春天
  • 卡车生产企业
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设