javascript - 使用 bootstrap 设置元素的 class 后，如何修改该元素的 class？-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

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

phpcn_u1582 2017-05-18 10:47:55

[JavaScript讨论组]

961

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


    
        
            ←前一页

js:

$('#prevBTN').className='previous disabled';

phpcn_u1582

全部回复(5)

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

假设元素

<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 4楼

HTML:

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

JS:

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

不是通过attr，而是通过className

PS:
如果你想为li添加属性disabled可以这样做，不是添加class而是attr：
$('#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 3楼

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

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

赞 +0

添加回复

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

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

赞 +0

添加回复

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

感谢 @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 元素集合，