修改元素样式
一、修改元素的类 addClass(names) removeClass(names)
给元素增加类:
<script type="text/javascript">
$(function(){
var element = $('#demo');
element.addClass('red b10')
})
</script>
<script type="text/javascript">
$(function(){
var element = $('#demo');
// element.addClass('red b10');
// element.removeClass('red');
element.addClass(function(index,className){
// index 是element的多个元素时,的index
// className 是该元素的class name
return "red s" // 增加两个类
})
})
</script>
给元素删除类:
<script type="text/javascript">
$(function(){
var element = $('#demo');
element.removeClass('red');
})
</script>
<script type="text/javascript">
$(function(){
var element = $('#demo');
// element.addClass('red b10');
// element.removeClass('red');
element.addClass(function(index,className){
// index 是element的多个元素时,的index
// className 是该元素的class name
return "red s" // 增加两个类
})
element.removeClass(function(index,className){
return "s"
})
})
</script>
hasClass() 方法:
<script type="text/javascript">
var element = $('#demo');
if( element.hasClass('hide') ){
element.removeClass('hide');
}else{
element.addClass('hide');
}
</script>
上述代码的一个简便方法:
toggleClass()
<script type="text/javascript">
var element = $('#demo');
if( element.hasClass('hide') ){
element.removeClass('hide');
}else{
element.addClass('hide');
}
$('li').each(function(index){
// 自动判断,如果没有red类则加上,否则删除该类
$(this).toggleClass('red', index % 2 == 0)
})
</script>
二、直接修改元素的样式
获取或修改样式
css(name,value) 方法
<script type="text/javascript">
$(function(){
var element = $('#demo');
element.css('width','400px');
element.css({
'background-color':'red',//或者使用驼峰型
height:400,
border:'10px solid #000',
marfinTop:100,
width:'-=100'
})
element.css('height',function(index,value){
return parseInt(value,10) + 100;
})
// 获取值
console.log(element.css('height'))
})
</script>
三、获取或设置元素的尺寸
width() height() 方法
width(value)
innerWidth(value) -- 仅包含内边距
outerWidth(value) -- 仅包含内边距、边框
outerWidth(true) -- 仅包含内边距、边框、外边距
...
<script type="text/javascript">
var element = $('#demo');
console.log(element.height())
console.log(element.width())
</script>
四、获取与设置元素的位置与浮动
offset(coordinates) 可见的最左上角的相对于左上角的偏移
<script type="text/javascript">
$(function(){
var box = $('.box');
var item = $('.item');
console.log(box.offset())
})
</script>
position() 获取的是离该元素最近的父级,有相对位置的元素的偏移;若没有,则返回的是与文档的偏移
<script type="text/javascript">
$(function(){
var box = $('.box');
var item = $('.item');
console.log(box.offset()) // 外边距
console.log(item.position())
})
</script>
scrollLeft(value) scrollTop(value) 相对于滚动条初始的偏移
五、修改元素内容
获取、设施元素内容,有两种方法: html() html(content) 与 text() text(content)
示例:
<script type="text/javascript">
$(function(){
var elements = $('li')
console.log(elements)
console.log(elements.html());// 仅对jquery对象中,也就是elements中第一个元素起作用
console.log(elements.text());// 对jquery对象中,也就是elements中所有元素起作用
elements.html('<strong>iiiiitem</strong>') // 对jquery对象中,也就是elements中所有元素起作用
elements.text('<strong>iiiiitem</strong>') // 对jquery对象中,也就是elements中所有元素起作用
})
</script>