搜索

首页  >  问答  >  正文

javascript - 使用 bootstrap 设置元素的 class 后，如何修改该元素的 class？

我设置了一个元素的 class ，现在想通过 JavaScript 更改该元素的 class ,我试过 jQuery 的 attr 修改 class 属性不行。
html:

<nav>
    <ul class="pager" id="pageCtr">
        <li class="previous" id="prevBTN">
            <a href="#" onclick="prevPage()"><span>&larr;</span>前一页</a>
        </li>
    </ul>
</nav>

js:

$('#prevBTN').className='previous disabled';
phpcn_u1582phpcn_u15822834 天前771

全部回复(5)我来回复

  • 某草草

    某草草2017-05-18 10:49:55

    假设元素

    <p class="className" id="idValue"></p>

    可以这样改

    var e = document.getElementById('idValue')
if (e) {
    e.className = "changedClassName"
}

    屡试不爽。

    jQuery把document.getElementById('idValue')改成$('#idValue')就好啦

    回复
    0
  • 黄舟

    黄舟2017-05-18 10:49:55

    HTML:

    <p id="id_test" class="old-bootstrap">

    JS:

    $('#id_test').className='new_class';

    不是通过attr，而是通过className

    PS:
    如果你想为li添加属性disabled可以这样做，不是添加class而是attr：li添加属性disabled可以这样做，不是添加class而是attr：
    $('#prevBTN').attr('disabled', true);$('#prevBTN').attr('disabled', true);

    去除attr：

    方案1：a标签不支持disabled属性，所以你把a标签换成button标签就可以了：http://www.w3school.com.cn/ti...
    方案2：用a标签也可以，去除它的href属性就可以实现不能点击的效果，即$('#prevBTN').removeAttr('href');
    参考：你把下面这段代码拿到这个上面运行

    <!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
function test() {
    $('#id_test').removeAttr('href');
}

</script>
</head>

<body>
<nav>
    <ul class="pager" id="pageCtr">
        <li class="previous" id="prevBTN">
            <a href="#" id="id_test" onclick="prevPage()"><span>&larr;</span>前一页</a>
        </li>
    </ul>
</nav>
<button id="id_test2" onClick="test()">disable</button>
</body>
</html>

    回复
    0
  • 怪我咯

    怪我咯2017-05-18 10:49:55

    楼主的代码是怎样的？
    为什么我这里直接用attr()来设置class是可以的呢？

    另外，jQuery还有addClass()和removeClass这两个方法，操作class 我一般用这两种方法。

    回复
    0
  • 黄舟

    黄舟2017-05-18 10:49:55

    jQuery有专门操作class的方法，可以查下相关API

    回复
    0
  • 淡淡烟草味

    淡淡烟草味2017-05-18 10:49:55

    感谢 @daryl 和 @tony_yin 的热心解答，我自己也想用吧 <li> 标签里面的 <a> 换成 <button> ,能实现禁用按钮效果，但是 .pager 的 BootStrap 默认样式会变化；
    将<li class="previous" id='prevBTN'> 换成 <li class="previous disabled" id='prevBTN'> 使用 document.getElementById('prevBTN').className='previous disabled'; 确实可行，但使用 jQuery 时会出现问题，$('prevBTN').className='previous disabled'; 就不能实现，主要原因是 $('prevBTN') 并不能得到 DOM 元素，而 className 是 DOM 里面的属性，$(selector) 只能得到满足选择器条件 DOM 元素集合，

    jQuery() (or $()) with an id selector as its argument will return a jQuery object containing a collection of either zero or one DOM element.

    解决方法：$('prevBTN').get(0).className='previous disabled';

    回复
    0
  • 取消回复