给div添加自定义的属性

<!-- lang: html -->
<!DOCTYPE html>
<!-- lang: html -->
<html>
<!-- lang: html -->
<head lang="en">
<!-- lang: html -->
    <meta charset="UTF-8">
<!-- lang: html -->
    <title></title>
<!-- lang: html -->
    <style type="text/css">
<!-- lang: html -->
    [data-spmid="zxy"] {
<!-- lang: html -->
    background-color: #00ff00;
<!-- lang: html -->
    height: 400px;
<!-- lang: html -->
    width: 400px;
<!-- lang: html -->
    }
<!-- lang: html -->
    </style>
<!-- lang: html -->
</head>
<!-- lang: html -->
<body>
<!-- lang: html -->
<div data-spmid="zxy">
<!-- lang: html -->

<!-- lang: html -->
</div>
<!-- lang: html -->

<!-- lang: html -->
</body>
<!-- lang: html -->
</html>

这里面的有一个属性是自定义的,这样就可以使用了。

转载于:https://my.oschina.net/u/933915/blog/308035

### 如何使用 jQuery 为 div 元素设置自定义属性 在 jQuery 中,可以通过 `attr()` 方法为指定的元素添加或修改自定义属性。`attr()` 方法的第一个参数是属性名称,第二个参数是属性值[^2]。例如,要为一个 `div` 元素添加名为 `data-custom` 的自定义属性,并设置其值为 `"example"`,可以使用以下代码: ```javascript $("#myDiv").attr("data-custom", "example"); ``` 上述代码会选择 ID 为 `myDiv` 的 `div` 元素,并为其添加一个名为 `data-custom` 的自定义属性,其值为 `"example"`。 如果需要同时设置多个属性,可以传递一个对象作为参数,其中键为属性名,值为对应的属性值。例如: ```javascript $("#myDiv").attr({ "data-custom": "example", "title": "Custom Title" }); ``` 这会为 `#myDiv` 添加两个属性:`data-custom` 和 `title`,并分别设置它们的值为 `"example"` 和 `"Custom Title"`。 ### 示例代码 以下是一个完整的 HTML 和 JavaScript 示例,展示如何使用 jQuery 为 `div` 元素添加自定义属性: ```html <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { // 设置自定义属性 $("#myDiv").attr("data-custom", "example"); // 显示自定义属性的值 alert($("#myDiv").attr("data-custom")); }); </script> </head> <body> <div id="myDiv">这是一个 div 元素</div> </body> </html> ``` 此代码会在页面加载完成后为 `#myDiv` 添加一个名为 `data-custom` 的自定义属性,并弹出一个对话框显示该属性的值。 ### 注意事项 1. 使用 `attr()` 方法时,确保属性名称符合 HTML 标准,尤其是自定义属性应以 `data-` 开头[^2]。 2. 如果需要操作 CSS 样式,建议使用 `css()` 方法而非直接通过 `attr()` 设置 `style` 属性[^5]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值