自我评价:走在路上的菜鸟,想着CMS|WEB|SEO,做着可以成为牛掰程序seoer的梦!

当前位置:博客 > 前端开发 > JavaScript脚本 >

javascript控制类名(className 属性)

作者:灰牛站长•发布时间:2021-07-12 12:15:59•浏览

书写过程中注意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改变html样式

    javascript改变html样式

    语法: Object.style.property=new style; 注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素。 基本属性表(property): 属性 描述 backgroundColor 设置...
    2021-07-12 12.07.30
  • javascript中innerhtml属性

    javascript中innerhtml属性

    语法: Object.innerHTML 注意: Object是获取的元素对象,如通过document.getElementById("ID")获取的元素。 注意书写,innerHTML区分大小写。 我们通过id="con"获取p 元素,...
    2021-07-12 12.07.00
  • javascript通过id获取元素

    javascript通过id获取元素

    语法: document.getElementById("id") !DOCTYPE htmlhtmlheadmeta charset="utf-8"title/title/headbodyh3今天星期六/h3p id="con"此刻再学习javascipt入门篇/pscript type="text/javascript"var myst...
    2021-07-12 12.07.13
  • JavaScript-关闭窗口(window.close)

    JavaScript-关闭窗口(window.close)

    用法: window.close();//关闭本窗口 或 窗口对象.close();//关闭指定的窗口 例如:关闭新建的窗口。 !DOCTYPE htmlhtmlheadmeta charset="utf-8"title/titlescript type="text/javascr...
    2021-07-12 12.07.10
  • JavaScript打开新窗口(window.open)

    JavaScript打开新窗口(window.open)

    语法: window.open([URL], [窗口名称], [参数字符串]) 参数说明: URL:可选参数,在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串...
    2021-07-12 12.07.24

手机端