我設定了一個元素的 class ,現在想透過 JavaScript 更改該元素的 class ,我試過 jQuery 的 attr 修改 class 屬性不行。
html:
<nav>
<ul class="pager" id="pageCtr">
<li class="previous" id="prevBTN">
<a href="#" onclick="prevPage()"><span>←</span>前一页</a>
</li>
</ul>
</nav>
js:
$('#prevBTN').className='previous disabled';
某草草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')
就好啦
黄舟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>←</span>前一页</a>
</li>
</ul>
</nav>
<button id="id_test2" onClick="test()">disable</button>
</body>
</html>
怪我咯2017-05-18 10:49:55
樓主的代碼是怎樣的?
為什麼我這裡直接用attr()來設定class是可以的呢?
另外,jQuery還有addClass()和removeClass這兩個方法,操作class 我通常會用這兩種方法。
淡淡烟草味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';