DOM修改Css样式

1.修改box1的宽度、高度、背景颜色

2.读取样式

读取样式表style的样式

语法：元素.currentStyle.样式名

它可以用来读取当前元素正在显示的样式（谁生效就获取谁的）

如果当前元素没有设置样式，则获取默认值

注意currentStyle只有IE浏览器支持，其他不支持

在其他浏览器可以使用：getComputerStyle（）这个方法获取元素当前的样式，不支持ie8以下浏览器

这个方法是windows的方法，需要2个参数：

第一个，要获取样式的元素

第二个,可以传递一个伪元素，一般都传null

getComputerStyle（）返回一个对象，再通过点调用

getComputerStyle（box1，null）.width；

如果不设置宽度，currentStyle会获取auto，getComputerStyle会获取具体的值

通过currentStyle和getComputerStyle（）读取到的样式只是值读的不能修改，如果先要修改必须通过Style

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box1 {width: 200px;height: 200px;background-color: red;}</style><script>window.onload = function () {//点击按钮修改box1大小//获取box1var box1 = document.getElementById("box1");//为按钮绑定单击响应函数var btn01 = document.getElementById("btn01");btn01.onclick = function () {//修改box1的宽度/*语法： 元素.style.样式名=样式值*/box1.style.width = "300px";box1.style.height = "300px";box1.style.backgroundColor = "yellow";};//点击btn02读取元素样式var btn02 = document.getElementById("btn02");btn02.onclick = function () {// alert(box1.style.height + box1.style.width);//获取元素样式表的样式//alert(box1.currentStyle.width);//只ie支持var obj = getComputedStyle(box1, null);//alert(getComputedStyle(box1, null).width);//不支持IE8以下浏览器//调用写的函数alert(getStyle(box1, "width"));};};/*定义一个函数，用来获取指定元素的当前的样式参数： obj：要获取样式的元素name：要获取的样式名   */function getStyle(obj, name) {if (window.getComputedStyle) {//正常浏览器有getComputedStyle这个方法，ie8以上有return getComputedStyle(obj, null)[name];//正常浏览器} else {return obj.currentStyle[name];//IE浏览器}}</script>
</head><body><button id="btn01">修改</button><button id="btn02">读取样式</button><div id="box1"></div>
</body></html>

DOM修改Css样式相关推荐

javascript 动态修改css样式
方法一:改变外联css文件,这里不讲这个. 方法二:通过改变claaName来改变样式,语法: obj.className = "style2";//或者 obj.setAttri ...
JS添加/修改CSS样式
JS添加/修改CSS样式是通过.style.xxxx属性=值来实现的,记得是等号赋值. document.getElementById("xx").style.xxx=xxxxx; ...
修改css样式后刷新网页无改变
在调整页面样式时候,css改变,而页面未发生变化 1.ctrl+f5lai1更新页面 2.Ctrl+F5依然失败绝大多情况下跟每个浏览器自身的缓存机制有关.而且大部分这个情况是单页面项目,这个时候按 ...
asp.net 动态修改css样式,ASP.NET中直接用C# 动态修改CSS样式
ASP.NET中直接用C#动态修改CSS样式 wonsoft(wonsoft@163.com) 使用JavaScript控制CSS样式有点麻烦,还是觉得直接使用C#操作更方便快捷,本文通过两个Butt ...
做html时css经常无效果,修改CSS样式无效有什么原因？
修改CSS样式为什么会无效?原因是什么?下面本篇文章就来给大家介绍一下修改CSS样式无效的原因,有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 一.HTML 标签未关闭这是版面设计 ...
通过JS修改CSS样式
通过JS修改CSS样式有两种方法: 修改某一属性的值修改某一元素的class名,使其被别的样式修饰修改某一属性的值 <!DOCTYPE html> <html> <h ...
原生Javascript/原生JS修改CSS样式的四种方式
设置style var domName = document.querySelector('#domName'); domName.style.backgroundColor = '#aaa' 设置属 ...
JQ修改css样式小结
1.修改标签属性 $(选择器).attr('style','属性:属性值'):// 如:$('.attr').attr('style','color:red'); 注:不过,此方法有一个不足之处.即: ...
Vue中动态使用JavaScript修改CSS样式
文章目录前言一.实现目标效果的难点二.使用Computed配合CSS变量完成动态修改CSS 1.设置Computed属性以及slider行内属性 2. 设置css样式(这里使用的是原生css,l ...

DOM修改Css样式

DOM修改Css样式相关推荐

最新文章

热门文章