DOM进阶之CSS属性操作

CSS操作属性，指的是使用JavaScript来操作一个元素的CSS样式。在JavaScript中，CSS属性操作同样有两种，
获取CSS属性值
设置CSS属性值

1.获取CSS属性值
语法：
getComputedStyle(obj).attr
说明：
obj表示DOM对象，也就是通过getElementById(),getElementsByTagName()等方法获取的元素节点。
attr表示CSS的属性名。需要注意的是，这里的属性名使用的是“骆驼峰型”的CSS属性名。所谓的骆驼峰型，就是例如，font-size写成fontSize
border-bottom-width应该写成borderBottomWidth
哈哈哈哈哈，这不像峰型嘛
那像"-webkit-box-shadow"这种奇葩的兼容性属性名该怎么写呢，
答案是“webkitBoxShadow"
举例：

<!DOCTYPE >
<html><head><title ></title><meta charset="utf-8" /><style type="text/css">#box{width:100px;height:100px;background-color:hotpink;}</style><script>window.onload=function(){var oBtn=document.getElementById("btn");var oBox=document.getElementById("box");                  oBox.onclick=function(){alert(getComputedStyle(oBox).backgroundColor);};                        }</script></head><body>            <input id="btn" type="button"  value="获取颜色" /><div id="box"></div></body>
</html>

分析：
getComputedStyle()方法其实有两种写法,并且是等价的：
getComputedStyle(oBox).backgroundColor
getComputedStyle(oBox)["backgrondColor"]

2.设置CSS属性值：
两种方法：
style对象
cssText()方法
2.1.style对象
使用style对象来设置一个CSS属性的值，其实就是在元素的style属性来如添加样式。这个设置的是行内样式。
语法：
obj.style.attr="值";
说明：
obj表示DOM对象，attr表示CSS属性名，采用的是骆驼峰
obj.style.attr等价obj.style["attr"]
例子：

<!DOCTYPE >
<html><head><title ></title><meta charset="utf-8" /><style type="text/css">         #box{width:100px;height:100px;background-color:hotpink;}</style><script>window.onload=function(){var oBtn=document.getElementById("btn");var oBox=document.getElementById("box");                      oBtn.onclick=function(){//获取两个文本框的值（也就是输入的内容）var attr=document.getElementById("attr").value;var val=document.getElementById("val").value;oBox.style[attr]=val;};                      }</script></head><body>            属性：<input id="attr" type="text" /><br />取值：<input id="val" type="text" /><br /><input id="btn" type="button"  value="设置" /><div id="box"></div></body>
</html>

2.2
cssText属性
我们可以使用cssText属性来同时设置多个CSS属性，这也是在元素的style属性添加的。
语法：
obj.style.cssText="值";
说明：
obj表示DOM对象，cssText的值是一个字符串，例如：
oDiv.style.cssText="width:100px;height:100px;border:1px solid gray;";
注意这个字符串中的属性名不再使用骆驼峰型写法，而是用平常的CSS写法，例如background-color应该写成background-color
举例：

<!DOCTYPE >
<html><head><title ></title><meta charset="utf-8" /><style type="text/css">         #box{width:100px;height:100px;background-color:hotpink;}</style><script>window.onload=function(){var oBtn=document.getElementById("btn");var oBox=document.getElementById("box");                    oBtn.onclick=function(){//获取两个文本框的值（也就是输入的内容）var txt=document.getElementById("txt").value;oBox.style.cssText=txt;};                }</script></head><body>            <input id="txt" type="text" />          <input id="btn" type="button"  value="设置" /><div id="box"></div></body>
</html>

分析：使用cssText来设置CSS属性，最终也是在元素的style属性中添加的，如图。
在实际开发的时候，更多情况下，我们使用操作HTML属性的方式给元素加上一个class属性值，从而把样式整体给元素添加上。
源码：

<!DOCTYPE >
<html><head><title ></title><meta charset="utf-8" /><style type="text/css">          .oldBox{width:100px;height:100px;background-color:hotpink;}            .newBox{width: 50px;height: 50px;background-color: lightskyblue;}</style><script>window.onload=function(){var oBtn=document.getElementById("btn");var oBox=document.getElementById("box");                        oBtn.onclick=function(){oBox.className="newBox";};                        }</script></head><body>                  <input id="btn" type="button"  value="切换" /><div id="box" class="oldBox"></div></body>
</html>

问题：
获取CSS属性值，不可以用obj.style.attr或obj.cssText.attr嘛，为什么一定要用getComputedStyle()呢

DOM进阶之CSS属性操作相关推荐

css 一些好玩的属性,css一些不常见但很有用的属性操作大全
1.自定义文本选择 ::selection { background: red; color: black; } 2.去掉video的controls中的下载按钮 video::-internal-m ...
Mr.J-- jQuery学习笔记(八)--CSS样式操作
CSS属性操作在jQuery中,关于元素的样式操作方法共有2种: (1)CSS属性操作: (2)CSS类名操作: 三种设置方法逐个设置 $("div").css("w ...
JavaWeb开发前端语言：jQuery（二）属性操作、DOM的增删改、CSS样式操作、动画、事件操作
JavaWeb开发前端语言:jQuery(二) 1.jQuery的属性操作 2.jQuery练习:使用jQuery完成全选.全不选.反选和提交功能 3.DOM的增删改 3.1 DOM的增操作 3.1 ...
前端：JS/28/CSS DOM动态样式（style对象，style 对象属性与CSS属性的转换），Event DOM，事件对象简介（DOM和IE中的Event对象），实例：点出满天小星星
CSS DOM动态样式使用JS操作CSS中的各个属性: JS只能操作或修改行内样式,如:imgObjstyle.border = "1px solid red"; 对于类样式,通 ...
JQ DOM属性操作
DOM属性操作一.常见的属性操作属性列表属性版本说明 attr() 1.0 设置或返回文档节点的属性. removeAttr() 1.0 移除文档节点的属性. prop() 1.6 设置或返 ...
Dom基础特殊的节点获取元素节点的内容获取元素的属性 css属性 Dom获取元素的方法
1.Dom基础 <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
javascript操作html元素CSS属性
以下先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css"> .or ...
初识HTML（四）进阶：CSS基础、常用属性
文章目录什么是css? css语法定义 css实例背景属性 opacity属性文本属性链接样式行标签与块标签 border边框 margin外边距 padding填充前言: 本章节将学习到 ...
DOM操作（创建、增、删、改、查、属性操作、事件操作）
关于dom操作,我们主要针对于元素的操作.主要有创建.增.删.改.查.属性操作.事件操作. 1.创建 1.document.write 2.innerHTML 3.createElement 2.增加 ...

DOM进阶之CSS属性操作

DOM进阶之CSS属性操作相关推荐

最新文章

热门文章