您的位置：首页 > Web前端 > JavaScript

javascript基础（class 类属性的操作（增，删，改，查））（四十五）

2017-02-16 17:37 399 查看

1.类属性的操作

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">

.b1{
width: 100px;
height: 100px;
background-color: red;
}

.b2{
width: 200px;
height: 200px;
background-color: yellow;
}

</style>

<script type="text/javascript">

window.onload = function(){

/*
* 点击按钮，修改div的样式
*/

//获取box1
var box1 = document.getElementById("box1");
//为btn01绑定一个单击响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){

//修改box1的样式
/*box1.style.width = "200px";
box1.style.height = "200px";
box1.style.backgroundColor = "yellow";*/

/*
* 我们可以通过修改元素的class来间接的修改元素的样式，
* 这样我们可以同时修改多个样式，并且提升浏览器渲染页面的性能
* 修改class也可以使行为和表现分离，方便后期维护
*/
//修改box1的class为b2
//box1.className += " b2";

//向box1中添加b2这个class
//addClass(box1 , "b2");

//检查box1中是否含有b2这个class
//alert(box1.className == "b2") ;

//创建一个正则表达式
/*var reg = /\bb2\b/;
alert(reg.test(box1.className));*/

//alert(hasClass(box1,"b3"));

//removeClass(box1,"b2");

toggleClass(box1,"b2");

};

};

/*
* 定义一个专门用来向元素中添加class的函数
* 参数：
* obj 要添加class属性的对象
* cn 要添加的class的属性值
*/
function addClass(obj , cn){

//如果元素中有该class则不添加，没有才添加
if(!hasClass(obj , cn)){
obj.className += " " + cn;
}

}

/*
* 创建一个函数检查一个元素中是否含有指定的class
* 如果有，则返回true。否则返回false
*/
function hasClass(obj , cn){

//创建正则表达式
var reg = new RegExp("\\b"+cn+"\\b");

//返回检查结果
return reg.test(obj.className);
}

/*
* 用来从指定元素中删除class值的方法
*/
function removeClass(obj , cn){

//要删除一个class，就是将这个class替换为一个空串
//创建正则表达式
var reg = new RegExp("\\b"+cn+"\\b" , "g");

//判断obj中是否含有这个class

if(reg.test(obj.className)){
//将内容替换为空串
obj.className = obj.className.replace(reg , "");
}
}

/*
* 用来切换元素的class的方法
* 如果元素中含有该class，则删除
* 如果元素中没有该class，则添加
*
*/
function toggleClass(obj , cn){
//检查obj中是否含有cn
if(hasClass(obj , cn)){
//有该class，则删除
removeClass(obj , cn);
}else{
//没有该class，则添加
addClass(obj , cn);
}

}

</script>
</head>
<body>

<button id="btn01">点我一下</button>
<br /><br />

<div id="box1" class="b1 b2 b3 b4 b2 b2 b2"></div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html javascript 经验

相关文章推荐

新的分享

章节导航