element.style

行内样式操作，当需要更改的样式较少时或功能简单时建议使用，直接在 script 标签中添加，一次只能更改一个属性样式，当需要更改的样式较多时，此方法较为繁琐。

 <style>div{width: 200px;height: 300px;background-color: rgb(253, 180, 180);}</style>
</head>
<body><div></div><script>var div1=document.querySelector('div');div1.onclick=function(){this.style.backgroundColor='#333'  //element.style 方式更改样式}</script>
</body>

element.className

当需要改变的属性样式较多时，使用此方法较为简便，把想要改变后展现的样式直接以类选择器的方式添加在 css 的 style 标签中，然后在 script 的事件中 element.className 即可，应注意在样式发生改变后，如果标签原本没有类名，则会执行完事件后添加进一个类名（刚才css中添加的），如果之前有类名，则会覆盖掉

<style>div{width: 200px;height: 300px;background-color: rgb(253, 180, 180);}.change{width: 200px;height: 300px;background-color: rgb(39, 89, 255);}</style>
</head>
<body><div></div><script>var div1=document.querySelector('div');div1.onclick=function(){this.className='change';  //此处的类名前不加点}</script>
</body>

点击前：

点击后：

点击后div标签中多了一个类名，并且类名为添加的改变后的类选择器样式

如果不想覆盖掉之前的样式又想改变添加新的样式，使用 多类名选择器

element.className=‘first，change’

使用 className 修改样式属性相关推荐

JavaScript 修改样式属性
通过点击div盒子改变盒子的样式属性: <body><div></div><script>// 1. 获取元素var div = document.qu ...
操作属性之修改样式属性
操作属性之修改样式属性 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
前端JavaScript DOM BOM 自学复盘 D1（DOM-获取DOM元素、修改HTML标签/表单/css样式属性、定时器-间歇函数）
内容概要 1. Web API 基本认知 1.1. 作用和分类 1.2. 什么是DOM 1.3. DOM作用 1.4 DOM树 1.4.1. DOM树是什么? 1.4.2. DOM 树的作用 1.5 ...
jQuery 修改样式
修改样式属性 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
ant 修改组件默认样式属性
得在 less 里面使用 :global 修改,不能是css文件. :global 修改是全局生效的,所以建议修改之前要加上calssName="样式名"; 不是 classNam ...
jq修改class_jQuery如何快速修改class属性和CSS样式
class属性修改类属性即class属性,规定类名. 用类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 注意每个html元素只有一个class属性.但是class属性的值可以是多 ...
php怎么修改div自带属性吗,修改html 属性，css样式。
一通过修改标签属性来改变它的样式 js设置和获取标签的属性 window.onload = function () { var attr = document.getElementById(&quo ...
ae批量修改字体_AE脚本-批量文字替换图层样式属性编辑脚本Aescripts pt_TextEdit 2.41 + 使用教程...
AE脚本-批量文字替换图层样式属性编辑脚本Aescripts pt_TextEdit 2.41 + 使用教程 Aescripts pt_TextEdit 2.41可以快速的修改合成中的文字图层的任何属 ...
如何使用jquery修改css中带有!important的样式属性
<div class="test">使用jquery修改css中带有!important的样式属性</div> 外部样式为: div.test{width: ...
ae批量修改字体_实用AE脚本-批量文字图层样式属性编辑替换脚本Aescripts pt_TextEdit 2.3 + 使用教程...
原标题:实用AE脚本-批量文字图层样式属性编辑替换脚本Aescripts pt_TextEdit 2.3 + 使用教程介绍实用AE脚本-批量文字图层样式属性编辑替换脚本Aes pt_TextEdi ...

使用 className 修改样式属性

element.style

element.className

点击前：

点击后：

使用 className 修改样式属性相关推荐

最新文章

热门文章