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 相关文章推荐
JS获取scrollHeight问题想到的标准问题
May 27 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
js中实现字符串和数组的相互转化详解
Jan 24 Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
Aug 24 Javascript
在layui中select更改后生效的方法
Sep 05 Javascript
vue中axios的二次封装实例讲解
Oct 14 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 Javascript
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
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
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
Codeigniter实现智能裁剪图片的方法
2014/06/12 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
JQUERY操作JSON实例代码
2010/02/09 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
2015/07/17 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
D3.js中强制异步文件读取同步的几种方法
2017/02/06 Javascript
vue.js开发环境搭建教程
2017/05/04 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
2019/11/23 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
python通过BF算法实现关键词匹配的方法
2015/03/13 Python
Python随机生成数模块random使用实例
2015/04/13 Python
python将字典内容存入mysql实例代码
2018/01/18 Python
python tkinter界面居中显示的方法
2018/10/11 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
Python秒算24点实现及原理详解
2019/07/29 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
html5菜单折纸效果
2014/04/22 HTML / CSS
法国和欧洲海边和滑雪度假:Pierre & Vacances
2017/01/04 全球购物
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
Linux Interview Questions For software testers
2013/05/17 面试题