jquery访问css类,jQuery获取并设置CSS类

实例

html>

.box,

p,

form {

margin: 0 auto;

margin-top: 20px;

text-align: center;

/*border:1px solid #ccc;*/

}

.box {

width: 400px;

height: 400px;

line-height: 400px;

border-radius: 50%;

font-size: 40px;

}

.text {

text-shadow: 1px 3px #ff6500;

color: blue;

}

input {

width: 450px;

height: 35px;

}

p {

width: 600px;

height: 150px;

line-height: 150px;

text-shadow: 3px 3px 3px #F75A1F;

color: #fff;

font-size: 25px;

font-weight: bold;

}

// 2、jQuery获取并设置CSS类

// CSS设置或返回样式属性

// 设置CSS属性:CSS("样式名","value")

$(function() {

// console.log($('.box').css('height'));

$('.box').css('background', 'pink');

// 设置多个CSS属性：CSS({"样式名":"value","样式名":"value","样式名":"value",...})

// $('.box').css({

//   'font-weight': 'bold',

//   'font-size': '25px',

//   'color': '#fff'

// });

// addClass()向被选元素添加一个或多个类

// $('.box').addClass('text');

// removeClass()向被选元素删除一个或多个类

// hasClass()检查被选元素是否包含指定的class;

console.log($('.box').hasClass('text'))

$('.box').click(function() {

if ($(this).hasClass('text')) {

$(this).removeClass('text')

} else {

$('.box').addClass('text')

}

})

console.log($('.box').hasClass('text'));

})

你好

~all luck is for you~

~好好学习，天天向上~

运行实例 »

点击 "运行实例" 按钮查看在线实例