JavaScript
操作元素样式
操作元素样式：
+ 分成两个大类
1. 行内样式
2. 非行内样式
1. 获取行内样式
+ style 的方式
=> 利用原生属性的方式
=> 元素.style
=> 获取到的内容是一个对象，里面包含元素所有的可设置样式
=> 如果你想获取哪个样式的值，就从对象里面获取即可
=> 但是 **只能获取到行内样式**
<style>
div{
height: 100px;
background-color: pink;
}
</style>
<body>
<div style="width: 100px;"></div>
<script>
// 获取元素
var div = document.querySelector('div')
// 1. style 方式获取样式
console.log(div.style)
// 访问 div 元素的原生属性 style 里面的 width 值
console.log(div.style.width) // 100px
// 访问 div 元素的原生属性 style 里面的 height 值
// 但是 div 的 style 属性里没有 height 这个值
console.log(div.style.height) // 空字符串
</script>
</body>
2. 获取非行内样式
2-1. window.getComputedStyle()
=> 标准浏览器
=> 语法：window.getComputedStyle('要获取的元素')
=> 返回值：一个对象，里面包含所有可设置样式，每个样式都有值，没有设置的有默认值
=> 你需要哪个样式，直接找个对象里面访问就行了
2-2. currentStyle 属性
=> IE 低版本
=> 语法：要获取样式的元素.currentStyle
=> 得到的就是一个对象，里面包含元素所有可设置样式，每个样式都有值
=> 你需要哪一个样式，直接在对象里面查找就可
说明：
+ 当你获取样式的时候
+ 如果你使用 点语法
-> 你获取带有中划线的样式要转化成驼峰的方式
+ 如果你使用 数组关联语法
-> 你可以写中划线
// 获取非行内样式
// 标准浏览器
var style = window.getComputedStyle(div)
console.log(style.height) // 200px
console.log(style.backgroundColor) // 点语法要写成驼峰 rgb(255, 192, 203)
console.log(style['background-color']) // 数组关联语法
// IE 低版本
var style = div.currentStyle
console.log(style.height)
console.log(style.backgroundColor) // pink
console.log(style['background-color']) // pink
注： currentStyle只用于在IE下获取元素的样式属性，并不会兼容火狐和谷歌或者非IE内核的浏览器
/*
自己封装一个方法去兼容
1. 准备一个函数，接收几个参数
=> 要获取样式的元素
=> 要获取什么样式
2. 函数内部处理兼容
=> 为什么会报错？
=> window.getComputedStyle()
-> 在 IE 报错，对象不支持 getComputedStyle 属性或方法
=> 判断一下 getComputedStyle 是不是在 window 里面
*/
function getStyle(ele, style){
// 判断 window 里面有没有 getComputedStyle()方法
if('getComputedStyle' in window){
// 标准浏览器
return window.getComputedStyle(ele)[style]
}else{
// IE 低版本
return ele.currentStyle[style]
}
}
var res = getStyle(div, 'width')
console.log(res)
设置元素的样式
+ 只有一种方式：
=> 设置元素的行内样式
=> 前段理论上是不可以设置元素的非行内样式
-> 如果你要修改非行内样式
-> 是需要修改 html 文件 或者 css 文件的
-> 但是我们前端JS 是不能操作电脑上的文件的
+ 设置行内样式
=> 语法：元素.style.样式名 = '值'
// 3. 给元素设置样式
// 只能设置行内样式
div.style.float = 'right'
扫一扫
589
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
