首页 > 编程知识 正文

js改变cssdisplay,js改变图片

时间:2023-12-29 13:16:34 阅读:329818 作者:EEYH

本文目录一览:

如何用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, ...})

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。