js操作元素样式
来源:互联网 发布:暗黑破坏神3mac版 编辑:程序博客网 时间:2024/06/05 08:51
一,内嵌样式:
<div id ="myDiv" style="width:100px;height:100px;background-color:red; border:1px solid black;"></div> <script> var myDiv = document.getElementById("myDiv"); alert(myDiv.style.width);//100px alert(myDiv.style['height']);//100px var style=myDiv.style; alert(style.backgroundColor);//red myDiv.style.backgroundColor='green';//myDiv背景色变为绿色 </script>
此时style属性可以操作,可以通过 ele.style.arr 方式获取并修改样式。
注意:
1 当获取类似font-size 属性时,为避免混淆javascript保留字符 - ,需要转化为驼峰命名法,改为fontSize;
2.属性值放在双引号中。
二,放在中的和外部样式表:
由于表现层与结构层的分离,使用style属性会无效,对于这种情况,不同浏览器的方法不一样。
非ie浏览器中,使用document.defaultView对象的getComputedStyle(ele,null/伪类)方法,该方法接受两个参数,第一个为要考察的元素,第二个则要根据情况,如果只是考察元素本身则为null,如果要 考察伪类,则为响应的伪类。该方法获取到的为元素应用的最终样式组合,同样是类似数组的一个实例。
在ie浏览器中,对getComputedStyle()方法不支持,但是针对每个标签元素都有一个近似于style属性的currentStyle的属性,且用法和style用法相同。只不过获取到的样式范围不一样。currenStyle获取到的和getComputedStyle()方法相接近。
为了在处理时达到兼容,可以根据这两种不同的处理方式创建一个函数来达到兼容目的,使得不管在那种浏览器中,都可以成功获取样式。如下图所示。
1 <style type="text/css"> 2 #myDiv { 3 background-color:blue; 4 width:100px; 5 height:200px; 6 } 7 </style> 8 9 <div id ="myDiv" style="background-color:red; border:1px solid black;"></div>10 <script>11 var myDiv = document.getElementById("myDiv");12 var finalStyle = myDiv.currentStyle ? myDiv.currentStyle : document.defaultView.getComputedStyle(myDiv, null);/*利用判断是否支持currentStyle(是否为ie)13 来通过不同方法获取style*/14 alert(finalStyle.backgroundColor); //"red"15 alert(finalStyle.width); //"100px"16 alert(finalStyle.height); //"200px"17 </script>
阅读全文
0 0
- js操作元素样式
- JS操作HTML元素的CSS样式
- js 针对html 元素 css样式 操作 等 累积
- js改变元素样式
- JS修改元素样式
- js获取元素样式
- JS获取元素样式
- JS获取元素样式
- js获取元素样式嵌入css样式
- JS给元素添加样式
- 原生js获取元素样式
- 原生js获取元素样式
- js 获取元素css样式
- 原生js获取元素样式
- js 样式操作
- JS-操作样式
- JS事件和CSS媒体查询对同一元素操作样式发生冲突解决方案
- js 操作iframe元素
- Spring初始化:org.springframework.web.context.ContextLoaderListener的作用
- SqLiite的使用
- KINECT骨骼关节点对照表
- Android,BLE,OAD,空中升级
- (12)intellij Cannot create package/ Java class in Intellij IDEA with Maven template
- js操作元素样式
- Git本地仓库push至GitHub远程仓库每次输入账户密码问题解决
- Json解析2--Gson解析详解
- Linux多线程编程讲解之系列七
- Android App首次安装完成后在安装界面直接打开应用,再按home键返回桌面,从桌面图标重新进入app,返回不到之前的界面问题
- 不要到Game Over的时候,才发现自己在做“无脑工作”
- 微信小程序搭建
- web服务端实现文件接收
- LeetCode(5)