JavaScript H5原生操作元素class
JavaScript H5原生操作元素class，包括获取元素class值，设置class值修改元素class值操作。
示例数据
<head>
<meta charset="UTF-8">
<title>01_H5原生JS获取元素class属性值及操作</title>
</head>
<body>
<div id="test" class="test1 test2 test3"></div>
</body>1.H5 JavaScript获取元素class值
<head>
<meta charset="UTF-8">
<title>01_H5原生JS获取元素class属性值及操作</title>
</head>
<body>
<div id="test" class="test1 test2 test3"></div>
<script type="application/javascript">
var divNode = document.querySelector("#test");
console.log(divNode.className);
</script>
</body>效果：
2.H5 JavaScript操作class属性
因为通过property属性获取到class属性值是字符串，操作起来特别不方便。因此H5提供了另一个属性classList，用于获取class属性值及操作class属性值。该方法返回一个数组。
<head>
<meta charset="UTF-8">
<title>02_H5原生JS获取元素class属性值及操作</title>
</head>
<body>
<div id="test" class="test1 test2 test3"></div>
<script type="application/javascript">
debugger
var divNode = document.querySelector("#test");
// 添加
divNode.classList.add("test4");
// 删除
divNode.classList.remove("test2");
// 存在则删除，不存在则新增
divNode.classList.toggle("test1");
divNode.classList.toggle("test5");
</script>
</body>效果：
https://www.leftso.com/article/2407291451023761.html
相关文章
JavaScript H5原生操作元素class，包括获取元素class值，设置class值修改元素class值操作。示例数据 <head>l; <meta cha
js 生成二维码引入qrcode.js该框架基于HTML5原生编写，兼容性较好。支持H5 vue uniapp 微信小程序等。基本使用参考<div id="qrcode">l;<...
前言有时候，我们需要对js的原生对象进行扩展，达到全局使用更方便的效果
JavaScript/JS数组清空，删除数组内所有数据。Array=[]与Array.length=0的区别
JavaScript集合（Array）转树（tree）结构js 原生数组转树形结构 /**
* 将list装换成tree
* @param {Object} myId 数据主键id
* ...
javascript（js）onclick 传递多个字符变量参数<a title="点击下载附件" onclick="downloadFile(\''+row.url+'\',\''+ro...
现有js数组数据如下：let dataArray=[{id:1,name:'张三'},{id:2,name:'李四'}];根据id获取js数组的对象let findId=1;
let findO...
简单使用创建一个js文件。//Say 模块export function Say(words){ alert(words);}H5调用模块<!DOCTYPE h
<body>l;
<script type="text/javascript">l;
function test(){
let obj={
...
方式一 spliceJavaScript 中的 splice() 方法可用于在数组中添加或删除元素。如果我们需要删除数组中的元素，可以使用 splice() 方
主流模块规范目前主流模块规范有：规范名称运行环境实现加载方式AMD(异步模块定义)客户端require.js异步CMD(通用模块定义)客户端sea.js异步Co
在js编程中,也会遇到替换字符串对象中某个字符。这时候就需要使用js内置函数replace了。可以替换一个也可以替换多个，支持正则表达式匹配比较灵活
热门文章
- Copyright © 2022-2025 左搜. All rights reserved.
- v1.0.0
- 渝ICP备15001810号-3
-
渝公网安备50019002504293号