浅谈脚本化css(一)
读写css属性
每一个dom元素都有一个属性style,dom.style里面存放的这个元素的行间样式,我们可以通过这个属性来读写元素的行间样式。
注意:
1.我们碰到float这样的关键字属性的时候,前面要加一个css前缀。
float—>cssFloat
2.复合属性必须拆解
border: 1px solid red;
这种属性是不允许出现的,只能写border-width、border-color、border-style。
3.当css中的样式是用“-”连接起来的时候,我们要变成小驼峰式写法。
background-color —> backgroundColor;
这个属性只能读写行间样式,我们写在css的样式是不能获取的,因此我们通过这个属性加样式的时候要注意权重值问题。
同时,我们在js中写样式只能往行间写,永远也写不到css文件里面。
浅谈脚本化css(一)的更多相关文章
- 浅谈脚本化css(二)
查询计算样式 window上面有一个方法叫做getComputedStyle可以来获取元素的计算样式,也就是css样式. window.getComputedStyle(ele. null); J ...
- 浅谈脚本化css(三)之方块运动函数
我们可以写一个让小方块运动的函数: div#demo { width: 100px; ; position: absolute; ; ; } var div = document.getElement ...
- 深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法
× 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息 ...
- 深入理解脚本化CSS系列第四篇——脚本化样式表
× 目录 [1]CSSStyleSheet [2]CSSRule 前面的话 关于脚本化CSS,查询样式时,查询的是计算样式:设置单个样式时,设置的是行间样式:设置多个样式时,设置的是CSS类名.脚本化 ...
- 深入理解脚本化CSS系列第三篇——脚本化CSS类
前面的话 在实际工作中,我们使用javascript操作CSS样式时,如果要改变大量样式,会使用脚本化CSS类的技术,本文将详细介绍脚本化CSS类 style 我们在改变元素的少部分样式时,一般会直接 ...
- 深入理解脚本化CSS系列第一篇——脚本化行内样式
× 目录 [1]用法 [2]属性 [3]方法 前面的话 脚本化CSS,通俗点说,就是使用javascript来操作CSS.引入CSS有3种方式:外部样式,内部样式和行间样式.本文将主要介绍脚本化行间样 ...
- JavaScript权威指南--脚本化CSS
知识要点 客户端javascript程序员对CSS感兴趣的是因为样式可以通过脚本编程.脚本化css启用了一系列有趣的视觉效果.例如:可以创建动画让文档从右侧“滑入”.创造这些效果的javascript ...
- 关于脚本化css
---恢复内容开始--- 想把自己认为的最重要的,最有用的几块写上,以后会边学边总结完善. 1.首先我们通过JavaScript可以获取到我们想要获取的元素的样式.而这个样式并非单独的哪一个部分的规则 ...
- 深入理解脚本化CSS系列第二篇——查询计算样式
× 目录 [1]getComputedStyle [2]注意事项 [3]currentStyle[4]IE 前面的话 元素的渲染结果是多个CSS样式博弈后的最终结果,这也是CSS中的C(cascade ...
随机推荐
- Bootstrap框架(二)
day58 巨幕 这是一个轻量.灵活的组件,它能延伸至整个浏览器视口来展示网站上的关键内容. Hello, world! This is a simple hero unit, a simple ju ...
- php批量导出pdf文件的脚本(html-PDf)
背景:突然有大量的文件需要导出成PDF文件,写一个批量导出pdf的脚本,同时文件的命名也需要有一定的规则 导出方式:向服务器中上传csv文件,csv文件中包含文件的地址和相对应的文件命名. 如下格式: ...
- fail2ban
在 [DEFAULT] 全局配置中的ignoreip选项中添加被放行的ip地址:ignoreip = 127.0.0.1 172.17.1.218 网段可以加 127.0.0.1/8,用空格隔开就行. ...
- js面试题-数组去重
今天,在聊天群里看到数组去重的话题,面试者的答案如下: 参考答案如下: 程序员思维,做出如下测试: 未考虑到:1,‘1’是不同的,应该不去重 未考虑到对象 所以,参考答案只能去重基础类型 根据以往看过 ...
- android 代码实现back键功能
方案一,简单但响应慢: doExec("input keyevent 4"); public String doExec(String cmd) { String s = &quo ...
- n层满k叉树总共有多少个节点
2叉树 1 3 7 对应公式为(2^n-1)/1 3叉树 1 4 13 对应公式为(3^n-1)/2 4叉树 1 5 21对应公式为(4^n-1)/3 ... n层k叉树,总共有(k^n-1)/k-1 ...
- python3和pip3安装和问题解决
python3安装前,最好先安装下依赖包: yum install -y openssl-devel yum install -y openssl yum install -y zlib-devel ...
- openerp学习笔记 视图样式(表格行颜色、按钮,字段只读、隐藏,按钮状态、类型、图标、权限,group边距,聚合[合计、平均],样式)
表格行颜色: <tree string="请假单列表" colors="red:state == 'refuse';blue:state = ...
- kafka 消费者offset记录位置和方式
我们大家都知道,kafka消费者在会保存其消费的进度,也就是offset,存储的位置根据选用的kafka api不同而不同. 首先来说说消费者如果是根据javaapi来消费,也就是[kafka.jav ...
- python独立环境——virtualenv
安装: pip3 intall virtualenv 创建独立运行环境: 1. 进入项目文件夹根目录 2. 创建环境 Mac:myproject michael$ virtualenv --no- ...