元素属性操作

最新推荐文章于 2023-03-23 20:06:41 发布

全渣工程师JsonWang

最新推荐文章于 2023-03-23 20:06:41 发布

阅读量122

点赞数

分类专栏： ES6的介绍文章标签： js javascript jquery

本文链接：https://blog.csdn.net/wj859548/article/details/118311392

版权

ES6的介绍专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.获取元素的属性

js获取属性

/*js获取属性*/
var temp = document.getElementById('href').getAttribute('data-id');
console.log("🚀 ~ file: A001获取元素属性.js ~ line 12 ~ temp", temp)

jq获取属性

/*jq获取属性*/
var temp = $('.href').attr('href');
console.log("🚀 ~ file: A001获取元素属性.js ~ line 9 ~ temp", temp)

2.删除元素的属性

jq删除属性

var temp = $('.href').removeAttr('data-aa');

js删除属性

/*js删除属性*/
var temp = document.getElementById('href').removeAttribute('data-id');

3.设置元素的属性

jq设置属性

var temp2= $('.href').attr('class','test001');
console.log("🚀 ~ file: A001获取元素属性.js ~ line 23 ~ temp2", temp2)

js设置属性

var temp2= document.getElementById('href').setAttribute('data-aa','AA');

展示结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A001元素属性</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
    <a class="href" href="https:www.baidu.com" data-id="550" id="href">baidu</a>

    

    <script>
        // 1.获取元素的属性

        // 获取属性 .getAttribute("属性")原生js

        // 获取属性 .attr("属性")jquery

        /*jq获取属性*/
        var temp = $('.href').attr('href');
        console.log("🚀 ~ file: A001获取元素属性.js ~ line 9 ~ temp", temp)
        /*js获取属性*/
        var temp = document.getElementById('href').getAttribute('data-id');
        console.log("🚀 ~ file: A001获取元素属性.js ~ line 12 ~ temp", temp)



        // 2.设置元素的属性
        // 设置属性 .setAttribute("属性","值") 原生js

        // 设置属性 .attr("属性","值") jquery

        /*jq设置属性*/
        var temp2= $('.href').attr('class','test001');
        console.log("🚀 ~ file: A001获取元素属性.js ~ line 23 ~ temp2", temp2)

        /*js设置属性*/
        var temp2= document.getElementById('href').setAttribute('data-aa','AA');


        // 3.删除元素的属性

        // 删除属性 .removeAttribute 

        // 删除属性 .removeAttr

        /*jq删除属性*/
        var temp = $('.href').removeAttr('data-aa');
        /*js删除属性*/
        var temp = document.getElementById('href').removeAttribute('data-id');
    </script>
</body>
</html>

希望能帮助到您，点个赞啦，我的老北鼻

全渣工程师JsonWang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素属性操作

1.获取元素的属性js获取属性/*js获取属性*/var temp = document.getElementById('href').getAttribute('data-id');console.log("???? ~ file: A001获取元素属性.js ~ line 12 ~ temp", temp)jq获取属性/*jq获取属性*/var temp = $('.href').attr('href');console.log("???? ~ file: A001获取元素属性.js
复制链接

扫一扫