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复选框CHECKBOX全选,取消全选
Aug 30 Javascript
容易被忽略的JS脚本特性
Sep 13 Javascript
JavaScript实现QueryString获取GET参数的方法
Jul 02 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
jQuery实现的放大镜效果示例
Sep 13 Javascript
jquery实现转盘抽奖功能
Jan 06 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
Jul 06 Javascript
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
详解JS构造函数中this和return
Sep 16 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 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版微信自定义回复功能示例
2016/12/05 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
2013/04/28 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
layui动态绑定事件的方法
2019/09/20 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
python 中的divmod数字处理函数浅析
2017/10/17 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
python+opencv轮廓检测代码解析
2018/01/05 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
Python实现多属性排序的方法
2018/12/05 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
python数字类型math库原理解析
2020/03/02 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
学习Python需要哪些工具
2020/09/04 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
Links of London官方网站:英国标志性的珠宝品牌
2017/04/09 全球购物
SAZAC的动物连体衣和动物睡衣:Kigurumi Shop
2020/03/14 全球购物
农行实习自我鉴定
2013/09/22 职场文书
领导检查欢迎词
2014/01/14 职场文书
会议主持词结束语
2015/07/03 职场文书
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS