样式-阿里云开发者社区

样式

2022-10-12 87

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 样式

1.css()

方法描述：获取匹配元素集合中的第一个元素的样式属性的计算值或设置每个匹配元素的一个或多个CSS属性。

需求描述：设置div的背景颜色为红色，字体颜色为白色

<div>我是div</div>
$('div').css({
    'background': 'red',
    'color': 'white'
});

<div style="background: red;color: white">我是div</div>
console.log($('div').css('background'));
console.log($('div').css('color'));

方法描述：为每个匹配的元素添加指定的样式类名。

需求描述：为所有的li添加样式”beauty“

.beauty {
    font-weight: bold;
    font-size: 18px;
    color: coral;
}

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ul>

$('li').addClass('beauty');

方法描述：确定任何一个匹配元素是否有被分配给定的样式类。

需求描述：判断p标签是否包含”beauty“的样式

.beauty {
    font-weight: bold;
    font-size: 18px;
    color: coral;
}

<p class="beauty"></p>

console.log($('p').hasClass('beauty'));
.hide {
    width: 100px;
    height: 100px;
    display: none;
}

方法描述：为匹配的元素集合中的每个元素上添加或删除一个或多个样式类，取决于这个样式类是否存在。

注意：如果存在（不存在）就删除（添加）一个样式类

需求描述：当单击按钮的时候，隐藏div，再次单击按钮的时候，显示div

.hide {
width: 100px;
height: 100px;
display: none;
}

<button>按钮</button>
<div>我是div</div>

$('button').click(function () {
    $('div').toggleClass('hide');
});