JS如何设置元素样式的方法示例


Posted in Javascript onAugust 28, 2017

一看到这个标题,大家可能首先想到的就是使用“[元素].style.[CSS属性名] = [属性值]”这样的套路去设置元素样式,但实际上,我们其实还有其他方式可以选择。

接下来,我将详细介绍三种设置元素样式的方式。

一、style

这个其实就是我们所熟知的方式,举个例子~~

<div id="box"></div>
var box = document.getElementById("box");
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = "#f00";

显示效果:

JS如何设置元素样式的方法示例

这种方式看似简单粗暴,但写法过于繁冗,尤其是在需要添加很多样式时尤为突出。并且需要注意的是,对于使用短划线的CSS属性名,必须将其转换成驼峰大小写形式。(如示例中的backgroundColor)

二、style.cssText

这种方式相对于上面方法更为简洁,更像是直接在元素上写CSS:

[元素].style.cssText = [CSS样式];

例如:

box.style.cssText = 'width: 200px; height: 200px; border: 1px solid #f00;';

确实,写法上很方便。

但是,缺点是后面同样通过这种方式添加的样式会覆盖之前通过style特性指定的样式。

同样还是上面的例子,只不过是将两段JS写在一块:

var box = document.getElementById("box");
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = "#f00";
box.style.cssText = 'width: 200px; height: 200px; border: 1px solid #f00;';

如果按照层叠样式表的特性,上面定义的红色的背景颜色应该还存在,然而实际上,下面通过style.cssText方式定义的样式会将style(包括style.cssText)方式添加的样式全部重写。所以,这个例子最终表现结果与上面只有一句时的效果是一样的:

JS如何设置元素样式的方法示例

最后注意下兼容性,IE8及更早版本均不支持cssText。

三、insertRule()

这个用法相对上面两种方法都较为复杂一些:

[sheet].insertRule([CSS样式],指定位置)

[sheet]表示某个样式表,它可以通过document.styleSheets来获得。那么,document.styleSheets又是什么呢? 说得简单一点就是应用在文档中的所有样式表,包括通过link标签引入的样式和style标签定义的样式。如果理解上还是有点困难,那么我们还是放个实例吧~~

首先头部引入样式表:

<link rel="stylesheet" type="text/css" href="css/index.css" rel="external nofollow" />

当然,这个样式表得真实存在,就算里面什么样式都不写也没关系。也可以直接用style标签,内容为空也不要紧。

然后用JS获取这个样式表:

var sheet = document.styleSheets[0];

最后我们就可以给这个样式表中添加样式了:

sheet.insertRule('#box{width: 300px; height: 300px; background-color: #0f0;}',0);

如果是在上面所有例子的基础上添加的这段代码,那么显示结果会是这样的:

JS如何设置元素样式的方法示例

大小还是200*200大小,背景颜色是绿色,说明通过style.cssText所设置的宽高样式把通过insertRule()设置的样式覆盖了,原因很简单,style(包括style.cssText)方式设置的样式属于行内样式,自然要比通过insertRule()设置的样式优先级更高咯~~

那么,示例当中insertRule()的第二个参数0又是指的什么呢?

它指的是我们需要添加CSS代码的位置,所以参数0就代表的是该样式表的最开始位置。

例如,我们先给样式表中手动添加一段样式(以下例子与上述例子无关):

<style>
  #box{ width: 100px; height: 100px;}
</style>
var sheet = document.styleSheets[0];
sheet.insertRule('#box{width: 300px; height: 300px; background-color: #0f0;}',0);

以上执行结果就是,宽高100*100的绿色盒子:

JS如何设置元素样式的方法示例

如果将insertRule()中的第二个参数改为1,那么通过JS添加的这段CSS代码相当于添加到了#box{ width: 100px; height: 100px;}的后面,类似下面这样:

<style>
  #box{ width: 100px; height: 100px;}
  #box{ width: 300px; height: 300px; background-color: #0f0;}
</style>

显示结果:

JS如何设置元素样式的方法示例

同样需要注意的是,insertRule()不兼容IE8及更早版本,但可以使用addRule()替代,语法稍微有点不同,上面例子这样写:

sheet.addRule('#box','width: 300px; height: 300px; background-color: #0f0;',0);

第一个参数代表元素,第二个参数代表CSS样式,第三个参数代表插入位置,前两个参数必选,最后一个可选,不填则默认为0。

结束语:浏览器兼容性问题对于前端开发者来说一直是个很头疼的问题,很多问题也是主要集中在IE上,只希望可恶的IE早日退出历史舞台吧!希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery+json实现的搜索加分页效果
Mar 31 Javascript
javascript将数组插入到另一个数组中的代码
Jan 10 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
Node.js中调用mysql存储过程示例
Dec 20 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
JS闭包的几种常见形式实例详解
Sep 16 Javascript
关于vue中 $emit的用法详解
Apr 12 Javascript
LayerClose弹窗关闭刷新方法
Aug 17 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
Sep 05 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
Jun 10 Javascript
weex slider实现滑动底部导航功能
Aug 28 #Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 #Javascript
vue2.0移除或更改的一些东西(移除index key)
Aug 28 #Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 #Javascript
JS实现图片手风琴效果
Apr 17 #Javascript
vue服务端渲染的实例代码
Aug 28 #Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 #jQuery
You might like
php堆排序(heapsort)练习
2013/11/13 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
js中的push和join方法使用介绍
2013/10/08 Javascript
jquery手风琴特效插件
2015/02/04 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
vue实现登陆登出的实现示例
2017/09/15 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
python逆序打印各位数字的方法
2018/06/25 Python
Python使用pyshp库读取shapefile信息的方法
2018/12/29 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
新电JAVA笔试题目
2014/08/31 面试题
幼儿园教师的考核评语
2014/04/18 职场文书
会议欢迎标语
2014/06/30 职场文书
调研座谈会发言材料
2014/08/23 职场文书
法人授权委托书范本
2014/09/17 职场文书
2014年大学团支部工作总结
2014/12/02 职场文书
计算机专业自荐信
2015/03/05 职场文书
小数乘法教学反思
2016/02/22 职场文书
AngularJS实现多级下拉框
2022/03/25 Javascript
Python os和os.path模块详情
2022/04/02 Python
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js
JS实现九宫格拼图游戏
2022/06/28 Javascript