js改變cssdisplay,js改變圖片

本文目錄一覽：

• 1、如何用JS來改變CSS屬性？
• 2、如何用jquery動態修改元素的display屬性
• 3、js鼠標滑入滑出改變css
• 4、利用js改變css裡面的display

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