如何在js中操作樣式

2021-08-13 16:58:07 字數 847 閱讀 1809

很多**都會有事件觸發之後的樣式變化,js中可以通過哪些方式改變容器的樣式呢?

以下將用簡單的盒子居中的例子在js事件中實現位置的變化,若要改變顏色、寬高等其他屬性,

也是相同的道理。

var content = document.getelementbyid("content");

var contentwidth = content.offsetwidth;

var contentheight = content.offsetheight;

var contentleft = getstyleattr(content,"left");

var contenttop = getstyleattr(content,"top");

//獲取當前容器的指定屬性的函式

function getstyleattr(obj,attr)

return obj.currentstyle[attr];

} document.onkeyup = document.onkeydown = function(e)

}

原布局:

按下「w」鍵之後的效果:

注意:1、offsetwidth會加上邊框的畫素值,getstyleattr()返回值的不包括邊框。

2、用「容器.style.屬性」設定寬高等樣式時,一定要加「px」,否則不生效。

js移除某個樣式 js中如何移除css樣式?

js中如何移除css樣式?dom元素應用css有兩種方式 通過class類名和id名應用樣式 通過指定style屬性應用樣式 我們可以針對以上兩種方式寫移除css樣式的方法 3 使用remove移除網頁中使用link標籤引入的css es6 document.queryselectorall lin...

如何在HTML頁面中包含CSS樣式

1 行內樣式 這個方式是直接在html的標籤中插入 style 屬性 屬性值 這個屬性 這是最簡單的一種插入方式,所以這個插入方式看上去很low 行內樣式的缺點主要有兩個 一 w3c標準是 內容 樣式 行為三者分開,這個嵌入方式不符合w3c規範,並且 亂,不好維護 二 冗餘,相同的style得寫多次...

JS操作css樣式

操作內聯樣式 通過js修改元素的樣式 通過style屬性設定的樣式都是內聯樣式,而內聯樣式具有較高的優先順序,所以通過js修改的樣式往往會立即顯示 讀取元素的樣式 獲取元素當前顯示的樣式 currentstyle 語法 元素.currentstyle.樣式名 getcomputedstyle 該方法...