本文目录一览：
如何用JS来改变CSS属性？
通过js来改变CSS属性，使用jQuery可以很方便的实现，像这样：
$(“img”).css(‘border-color’,’red’);
就可以把边框颜色都变成红色。
这是针对此问题的测试页面
2、这是3张图片
img src=’;fm=11gp=0.jpg’
img src=’;fm=11gp=0.jpg’
img src=’;fm=11gp=0.jpg’
3、这是图片的样式，边框默认为灰色。
img{
max-width:200px;
border-color:gray;
border-width:10px;
border-style:solid;
}
4、现在通过这几行用到jQuery的代码，控制图片边框根据鼠标移入移出边框变灰和变红。
$(function(){
$(“img”).on(‘mouseover’,function(){
$(this).css(‘border-color’,’red’);
}).on(‘mouseout’,function(){
$(this).css(‘border-color’,’gray’);
});
});
5、效果如图
如何用jquery动态修改元素的display属性
可以使用jQuery的css方法，css()需要传两个参数，第一个是css元素的名称，第二个为值，例如css(“display”,’none’);
工具原料：编辑器、浏览器
1、使用css()方法来设置某一个元素的display属性，代码如下：
body
div id=”div1″
test
/div
script
$(function(){
$(“#div1”).css(“display”,’none’);
})
/script
/body
2、以上代码中使用$(“#div1”)选择器选择到div元素，然后使用css方法来设置其display值为none将元素隐藏。
3、运行的代码如下：
没有运行js代码之前：
运行的之后：
js鼠标滑入滑出改变css
(function($) {
$.fn.huadong = function( obj, obja, time ) {
this.height($(window).height()).css({‘position’:’absolute’, ‘top’:’0px’, ‘left’ : ‘0px’}); //首先把最外层的标签对象设置为浮动， 上边为0， 左边也为0
var left = $(obj).width(); //取得左边栏的宽度
$(obj).height($(window).height()).width(0).hide(); //将左边栏的高度设置为浏览器的高度， 宽度为0， 并隐藏掉！这样是为了页面载入的时候初始化
$(obja).click(function(){ //给触发按钮绑定点击事件，也就是鼠标点击触发按钮后执行的动作
$(obj).show().animate({‘width’:left + ‘px’}, time); //把左边栏的宽度设置为原来的宽度并显示出来， 根据设定的时间慢慢展现
});
$(obj).mouseout(function(){ //绑定左边栏鼠标移开事件
$(this).animate({‘width’:’0px’}, time, function(){ $(this).hide(); }); //又把左边栏的宽度设置为0， 并且隐藏
});
}
})(jQuery);
利用js改变css里面的display
$(“#div”).css(“display”,”none”);//修改display属性为none
$(“#div”).css(“display”,”block”);//修改display属性为block
jquery的css()方法的用法:
1.只需要修改一个css时格式为
$(selector).css(name,value)
2.设置多个属性的格式为
$(selector).css({property:value, property:value, …})
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/156935.html
微信扫一扫 
支付宝扫一扫 