欢迎访问我的的博客,网站主要用于记录学习WEB语言|CMS建站|SEO优化及日常工作常见问题总结!
您的位置:主页 > JavaScript >

javascript控制类名(className 属性)

书写过程中注意JavaScript定义变量赋值里面的不能使用JavaScript关键词与JavaScript保留字

语法:object.className = classname

作用:

  1. 获取元素的class 属性
  2. 为网页内的某个元素指定一个css样式来更改该元素的外观

看看下面代码,获得 <p> 元素的 class 属性和改变className:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>className 属性</title>
<style type="text/css">
.one{
width: 200px;
height: 200px;
color: red;
background-color: green;
text-align: center;
line-height: 200px;
}
.two{
color: white;
background: #f90;
}
</style>
</head>
<body>
<p class="one" id="con">学习javascipt在路上</p>
<input type="button" name="" id="" value="切换class样式" onclick="mystr()"/>
<script type="text/javascript">
var mycon = document.getElementById('con');
document.write('<br />'+'<p>元素原本的Class值为:'+mycon.className);//输出p元素的class属性
function mystr(){
mycon.className='two';//改变className属性值
}
</script>
</body>
</html>
上一篇标题:
下一篇标题:显示和隐藏(display属性)

相关文章

 

文章-javascript控制类名(className 属性)发布日期:2021-04-01 18:04作者:admin
如需转载,请注明文章出处和来源网址:https://www.dhnblog.com/javascript/285.html