我有一个 div 元素:
<div id="fruit-part">
<input type="radio" name="fruits" value="apple">Apple
<input type="radio" name="fruits" value="orange">Orange
</div>
我的css定义div边框颜色
#fruit-part {
border: 1px solid #cc3;
}
通过使用 jQuery:
$('#fruit-part').hide()
和 $('#fruit-part').show()
我可以轻松地 hide 和 show div
内的内容,但不是 div 边框线。
正如你在上面看到的,我的
div
有一条颜色为“#cc3”的边框线,我想知道,如何使用jQuery来隐藏和显示div边框线?
将您的 CSS 属性移动到一个类,然后从
fruit-part
. 中添加/删除该类
.bordered {
border: 1px solid #cc3;
}
#fruit-part {}
$('#fruit-part').addClass('bordered');
$('#fruit-part').removeClass('bordered');
使用JQuery的
css
方法:
$("#fruit-part").css("border", "");
/* CSS */
.noborder { border: 0; }
//Hide border
$('#fruit-part').addClass('noborder');
//Show border
$('#fruit-part').removeClass('noborder');
$('#fruit-part').css('border', '');
和$('#fruit-part').css('border', '1px solid #cc3');
$('a').click(function() {
$('#fruit-part').toggle();
});
#fruit-part {
border: 1px solid #cc3;
}
<div id="fruit-part">
<input type="radio" name="fruits" value="Mango">Mango
<input type="radio" name="fruits" value="pineapple">Pineapple
</div>
<a href="#">Toggle visibilty</a>