JavaScript之ClassName属性学习
在前面的style属性学习中,知道了通过style属性可以控制元素的样式,从而实现了行为层通过DOM的style属性去干预变现层显示的目地,但是这种就是不好的,而且为了实现通过DOM脚本设置的样式,你就不得不花时间去研究JavaScript函数,去寻找对应修改和设置样式的有关语句。而且每添加或修改js脚本的代码量远大于我们修改css样式的代码量。
所以与其使用DOM直接改变莫个元素的样式,不如通过JavaScript代码去更新这个元素的class属性。
下面通过代码来比较这两种方式的差别:
function setStyleHeaderSiblings() {if (!checkCompatibility()) return; //check compatibilityvar heads = document.getElementsByTagName("h1");var ele; //defines a element for receive;for (var i = 0; i < heads.length; i++) {ele = getNextElement(heads[i].nextSibling);ele.style.fontWeight = "bold";ele.style.fontSize = "1.2em";} }
function setStyleHeaderSiblings() {if (!checkCompatibility()) return; //check compatibilityvar heads = document.getElementsByTagName("h1");var ele; //defines a element for receive;for (var i = 0; i < heads.length; i++) {ele = getNextElement(heads[i].nextSibling);ele.className="change";}
css样式表.change{font-weight:bold;font-size:1.2em;}
假设我们这个需要给这个效果加上一个
上面这种做法需要在js里面加如下代码:
ele.style.backgroundColor="blue";
而第二种做法则只要在样式表里加一个样式就可以实现,而且实现了样式与行为的分离,还减少了我们的代码量,所以在后期需求不确定的情况下,我建议第二种方法来动态的修改元素的样式。
但是通过className设置元素的样式也有一个缺陷,那就是通过className设置元素的class属性时将替换(而不是追加)该元素原有的class属性,在实际开发中往往很多时候我们需要追加class;
所以根据这个需要我们可以自定义一个方法来实现追加className的效果代码如下:
function addClass(element,value) {if (!element.className) {element.className = value;} else {newClassName = element.className;newClassName += " "; //这句代码追加的类名分开newClassName += value;element.className = newClassName;} }
转载于:https://www.cnblogs.com/cmy1996/p/9177434.html
JavaScript之ClassName属性学习相关推荐
- JavaScript之Style属性学习
当CSS使用伪类开始侵入DOM和JavaSCript所控制着的行为层时,DOM和JavaScript也使用他们的一系列样式去控制表现层,这篇随笔主要说的就是利用JavaScript去控制元素的表现形式 ...
- javascript 之 className属性
Javascript 可以通过className 属性灵活的更改一个标签元素的CSS 类选择器来实现样式的变化. 1.用className 属性修改节点的css类别 代码如下: 1 <html& ...
- html5 scrollheight,JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记...
全文参考:https://github.com/iuap-design/blog/issues/38 .MDN clientHeight,只读 clientHeight可以用公式 CSS height ...
- html 滚动条 scrolltop scrollheight,JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记...
全文参考:https://github.com/iuap-design/blog/issues/38 .MDN clientHeight,只读 clientHeight可以用公式 CSS height ...
- JavaScript中classList属性和className的区别
className 在操作类名时,需要通过className属性添加,删除和替换类名.因为className是一共字符串,所以即使只修改字符串一部分,也必须每次都设置整个字符串的值. var a = ...
- 【JavaScript】Document对象学习
Document 对象 当浏览器载入 HTML 文档, 它就会成为 Document 对象. Document 对象是 HTML 文档的根节点. Document 对象使我们可以从脚本中对 HTML ...
- 《零基础学JavaScript(全彩版)》学习笔记
<零基础学JavaScript(全彩版)>学习笔记 二〇一九年二月九日星期六0时9分 前期: 刚刚学完<零基础学HTML5+CSS3(全彩版)>,准备开始学习JavaScrip ...
- JavaScript中的属性操作
为什么80%的码农都做不了架构师?>>> JavaScript中的属性操作 一. 原型链 在js中,任何一个对象都有一个prototype属性,在js中记做:_proto_. ...
- 《JavaScript语言精粹》学习笔记(函数(2))
<JavaScript语言精粹>学习笔记(函数(2)) 函数(Functions) 参数(Arguments) 当参数被调用时,会得到一个"免费"的参数数组argume ...
最新文章
- Redis的Java客户端Jedis的八种调用方式(事务、管道、分布式…)介绍(转)
- Facebook新推出AL语言,意在简化程序静态分析
- 安卓高手之路之ClassLoader(三)
- 牛人 20000 字的 Spring Cloud 总结,太硬核了~
- textarea怎么占满整个td_保健品为什么偏偏盯上老人?作为子女,应怎么面对老人狂买保健品...
- 区别Transform、Transition、Animation
- Python解析JSON数据的基本方法
- linux控制主机风扇转速,怎么调整cpu风扇转速 cpu风扇转速调整方法【详解】
- win7 升级到 win10
- 机器视觉学习笔记(7)——基于OpenCV的双目摄像机标定
- fullcalendar做的设置上班和休息
- 《编程之道》(转载) 全文
- 对JavaWeb项目中WEB-INF目录的理解
- 软考网络规划设计师知识点总结--第一章(计算机网络概论)
- element中滑块组件Slider展示一天24小时的时间问题
- 点分治+CDQ分治+整体二分全纪录
- Python代码原来还可以这样玩——画出不同人物效果图,感觉很美好
- 王小云数学与计算机奖,2019未来科学大奖揭晓, 清华大学、山东大学教授王小云获“数学与计算机科学”奖...
- ROS下如何使用moveit驱动UR5机械臂
- 【英语词组】恋恋不忘Day 3-4
热门文章
- php 微盘系统教程,新版微盘API接口调用方法
- Android JNI学习(四)——JNI的常用方法的API
- 95-34-025-Context-AbstractChannelHandlerContext
- 60-200-060-使用-命令-MySQL事务相关命令
- 【Flink】Flink exitCode=239
- 1.1.0-简介-P10-分布式事务的解决方案
- 【Kafka】Kafka幂等性原理及实现剖析
- 【Flink】部分task每秒处理速度为0
- 【Flink】Flink 实时超时统计-A发生B不发生事件统计-不发生事件
- 【Spring】CGLIB动态代理