• 技术文章 >web前端 >js教程

    js怎么通过类来修改css样式

    青灯夜游青灯夜游2021-07-22 16:07:35原创171

    在JavaScript中,可以利用setAttribute()方法来通过类修改css样式,只需要修改指定元素的“class”属性值即可,语法“元素对象.setAttribute("class", "新类名");”。

    本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

    在JavaScript中,可以利用setAttribute()方法来通过类修改css样式。

    下面通过代码示例来具体看看:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <style>
    			.style1{
    				height: 50px;
    				border: 1px solid red;
    			}
    			.style2{
    				border: 3px dashed #AFEEEE;
    				padding: 10px;
    			}
    		</style>
        </head>
        <body>
            <div id="style" class="style1">测试文本</div><br />
    		<input type="button" value="更改类名" onclick="changeStyle()" />
        </body>
    	<script>
    		function changeStyle() {
    		  var obj = document.getElementById("style");
    		  obj.setAttribute("class", "style2");
    		}
    	</script>
    </html>

    效果图:

    1.gif

    说明:

    setAttribute() 方法添加指定的属性,并为其赋指定的值。

    如果这个指定的属性已存在,则仅设置/更改值。

    语法

    element.setAttribute(attributename,attributevalue)
    参数类型描述
    attributenameString必需。您希望添加的属性的名称。
    attributevalueString必需。您希望添加的属性值。

    (学习视频分享:css视频教程

    以上就是js怎么通过类来修改css样式的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:JavaScript
    上一篇:servlet中定义的变量如何传给javascript函数 下一篇:ES6中值得了解的新增字符串方法
    第16期线上培训班

    相关文章推荐

    • javascript基于对象吗• JavaScript的内部方法有什么• javascript预编译做了啥• 怎样在JavaScript添加图片• javascript里什么是表达式• 如何实现javascript延时加载

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网