首页 > 其他分享 >HTML DOM 教程---操作自定义属性(2)

HTML DOM 教程---操作自定义属性(2)

时间:2024-10-14 22:53:45浏览次数:3  
标签:box 自定义 tiechui DOM removeAttribute --- var 属性

<!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>Document</title>
</head>
<body>
    <div id="box" kerwin="hello"> hello </div>
    <input type="text" value="111111" id="username">

    <input type="checkbox" checked="checked" id="rember">
    <img src="" alt="" id="photo">
    <ul>
        <li>111111</li>
        <li>222222</li>   
        <li>333333</li>
    </ul>
    <!-- 自定义标签data- -->
    <div id="box2" data-kerwin="hello" data-tiechui="hello2" data-xiaoming="hello3"></div>
    <script>

        // 自定义属性
        // 设置属性
        box.setAttribute("tiechui","111111111")
        // 获取属性 
        console.log(box.getAttribute("tiechui"))

        // 删除属性
        box.removeAttribute("tiechui")
        box.removeAttribute("kerwin")

        // var oitems = document.getElementsByTagName("li")
        // for(var i=0;i<oitems.length;i++){
        //     oitems[i].setAttribute("kkindex",i)
        // }

        // h5  data-自定义属性的特有标签
        // 获取
        console.log(box2.dataset)
        // 设置
        box2.dataset.xiaoming = "hello3333"
        // 删除
        delete box2.dataset.xiaoming
        delete box2.dataset.kerwin
        delete box2.dataset.tiechui

        var oitems = document.getElementsByTagName("li")
        for(var i=0;i<oitems.length;i++){
            oitems[i].dataset.index = i
        }
    </script>
</body>
</html>

标签:box,自定义,tiechui,DOM,removeAttribute,---,var,属性
From: https://blog.csdn.net/weixin_58694594/article/details/142930939

相关文章

  • Spring Cloud Alibaba 体系-组件-Sentinel
    Sentinel是阿里巴巴开源的一款面向分布式服务架构的流量控制组件,主要用于处理微服务中的限流、熔断和降级,帮助提高系统的稳定性和可靠性。它在微服务架构中,尤其是与SpringCloud、Dubbo等框架结合时,起到了至关重要的保护作用。1.限流、熔断、降级的概念限流(RateLimitin......
  • OpenCV-物体跟踪
    文章目录一、物体跟踪的定义二、OpenCV中的物体跟踪算法三、OpenCV物体跟踪的实现步骤四、代码实现五、注意事项OpenCV是一个开源的计算机视觉和机器学习软件库,它提供了丰富的功能来实现物体跟踪。以下是对OpenCV中物体跟踪的详细解释:一、物体跟踪的定义物体跟踪......
  • 八卦GPT-5的一切
    这篇超长文章——既是评论,也是探索——关于GPT-5对最受期待的下一代AI模型的深入分析 但它不仅仅是关于GPT-5。•它涉及我们对下一代AI模型的期望。•它关于即将出现的令人兴奋的新功能(如推理和代理)。它不仅讨论GPT-5技术本身,还包括GPT-5产品。•它涉及OpenAI因竞......
  • Moectf2024-All-Crypto
    前三周都出了,第四周有两题不会,为复现Crypto入门指北fromCrypto.Util.numberimportbytes_to_long,getPrimefromsecretimportflagp=getPrime(128)q=getPrime(128)n=p*qe=65537m=bytes_to_long(flag)c=pow(m,e,n)print(f"n={n}")print(f"p={p......
  • csp-s模拟11
    赛时rank11,T1100pts,T217pts,T30pts,T40pts,T510pts这场模拟赛就是糖,告诉我题目难度不按升序排列就是除了T1我都不会呗。玩水(water)签成了,还签了个首切?定义一个形如\(\begin{matrix}A*\\*\\end{matrix}\)的为一个角,角的位置为A的位置。有解的时候就是两个角相邻或......
  • 2024牛客暑期多校训练营4 - J. Zero (究极卡常)
    \(O(N^2)\)AC。输入后预处理?数量的前缀和。双层循环找所有的区间\([l,r]\)使区间内没有\(0\),找到以后直接用逆元+快速幂求\(\frac{(r-l+1)^k}{2^{sum_{r}-sum_{l-1}}}\),最后累加和。因为数据过水,这样已经能AC了。#include<cstdio>usingnamespacestd;constint......
  • Stanford CS149 -- Assignment 3: A Simple CUDA Renderer
    作业描述及代码参见:CS149-asst3实验环境:WSL2;GeForceMX350;Cuda12.6第一部分:CUDA热身练习1:SAXPY实验结果:相比基于CPU的实现,性能明显下降。这是由于SAXPY属于I/O密集型任务,计算量较小,主要的时间耗费在数据的转移。第二部分:CUDA热身练习2:并行前缀和第三部分:简单......
  • 解决 Maven 插件报错:The plugin org.codehaus.mojo:flatten-maven-plugin:1.5.0 requi
    检查Maven版本:首先,确认当前使用的Maven版本是否与插件要求的版本一致。可以通过在命令行中输入 mvn-v 来查看当前Maven的版本信息。升级或降级Maven版本:如果当前Maven版本过低,需要升级到插件要求的版本;如果过高,可能需要降级。升级或降级Maven可以参考Maven的官......
  • Stanford CS149 -- Assignment 4: NanoGPT149
    作业描述及代码参见:cs149gptWarm-Up:访问张量张量/数组都是按行存储的,四维数组可以看作元素为三维数组的数组,元素大小即为三维数组内元素总数,以此类推。第1部分:简单(但不太高效)的注意力机制实现主要实现两个矩阵乘法和一个softmax运算。第2部分:块矩阵乘法和UnfusedSof......
  • 增强型PID-自适应-前馈-神经网络控制研究(Matlab代码实现)
     ......