对元素样式进行操作
1.操作内联样式
通过js修改元素的样式:语法:元素.style.样式名=样式值
需要将这种样式改成驼峰命名法
去掉-,然后将-后的字母大写
我们通过style属性设置的样式都是内联样式而内联样式有较高的优先级,所以通过js修改的样式往往会立即显示
如果在样式中写了!important,则设置的样式会有最高的优先即使通过js也不能覆盖样式,此时会导致js修改的样式失效
<style>
#box1 {
200px;
height: 200px;
background: skyblue;
}
</style>
<script>
window.onload = function () {
/*
* 点击按钮以后,修改box1的大小
*
*
*
*/
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
//修改box1的宽度
/*
* 通过js修改元素的样式
* 语法:元素.style.样式名=样式值
* 这种名称在js中是不合法的比如background-color
* 需要将这种样式改成驼峰命名法
* 去掉-,然后将-后的字母大写
*
* 我们通过style属性设置的样式都是内联样式
* 而内联样式有较高的优先级,所以通过js修改的样式往往会立即显示
*
* 但是如果在样式中写了!important,则设置的样式会有最高的优先级
* 即使通过js也不能覆盖样式,此时会导致js修改的样式失效
* 所以尽量不要为样式加!important
*/
box1.style.width = "300px";//要是字符串""
};
var btn02 = document.getElementById("btn02");
btn02.onclick = function () {
//读取box1的样式
/*
* 通过style属性设置和读取的都是内联样式
* 无法读取样式表(style)中的样式
*
*
*/
alert(box1.style.width);
};
}
</script>
</head>
<body>
<div id="box1"></div>
<button id="btn01">点我一下</button>
<button id="btn022.获得元素的属性样式
获取元素当前显示的样式
语法:元素.currentStyle.样式名
可以获取当前元素正在显示的样式
如果当前元素没有设置该样式,则获取它的默认值
只有ie浏览器支持
<style>
#box1 {
200px;
height: 300px;
background-color: antiquewhite;
}
</style>
<script>
window.onload = function () {
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
//alert(box1.style.width);
/*
* 获取元素当前显示的样式
* 语法:元素.currentStyle.样式名
* 可以获取当前元素正在显示的样式
* 如果当前元素没有设置该样式,则获取它的默认值
* 只有ie浏览器支持
*/
/**
*
* 其他浏览器中可以使用
* 其他浏览器中可以使用
*
* 这个方法是window的方法,可以直接使用
* 需要两个参数
* 第一个,获取样式的元素
* 第二个,可以传递一个元素,一般都传null
*
* 该方法会返回一个对象,对象中封装了当前元素的样式
* 可以通过对象,样式名来获取样式
* 如果获取的样式没有设置,则会获取到真实的值,而不是默认值
* 比如:没有设置width,它不会获取到auto,而是一个长度
*
* 但是该方法不支持ie8及以下的浏览器
*
* 通过currentStyle和getComputedStyle()读取到的样式都只读的,不能修改,如果要改必须通过style属性
*/
// //正常浏览器
// alert(getComputedStyle(box1,null).backgroundColor);
// //ie8
// alert(box1.ariaCurrent.backgroundColor);
alert(getStyle(box1, "width"));
}
}
/*
* 定义一个函数,获取指定元素当前的样式
* 参数:
* obj 要获取的样式
*
*/
function getStyle(obj, name) {
//正常浏览器的方式
return getComputedStyle(obj, null)[name];//
//ie8的的方式
return obj.currentStyle[name];
}
</script>
</head>
<body>
<div id="box1"></div>
<button id="btn01">按钮