原生js格式化css（原生js改變樣式）

本文目錄一覽：

• 1、如何使用JS來改變CSS樣式
• 2、如何還原壓縮過的css或Js文件，如下圖
• 3、js中用cssText設置css樣式的簡單方法

如何使用JS來改變CSS樣式

方法:

document.getElementById(“xx”).style.xxx中的所有屬性是什麼

盒子標籤和屬性對照

CSS語法（不區分大小寫） JavaScript語法（區分大小寫）

border border

border-bottom borderBottom

border-bottom-color borderBottomColor

border-bottom-style borderBottomStyle

border-bottom-width borderBottomWidth

border-color borderColor

border-left borderLeft

border-left-color borderLeftColor

border-left-style borderLeftStyle

border-left-width borderLeftWidth

border-right borderRight

border-right-color borderRightColor

border-right-style borderRightStyle

border-right-width borderRightWidth

border-style borderStyle

border-top borderTop

border-top-color borderTopColor

border-top-style borderTopStyle

border-top-width borderTopWidth

border-width borderWidth

clear clear

float floatStyle

margin margin

margin-bottom marginBottom

margin-left marginLeft

margin-right marginRight

margin-top marginTop

padding padding

padding-bottom paddingBottom

padding-left paddingLeft

padding-right paddingRight

padding-top paddingTop

顏色和背景標籤和屬性對照

CSS 語法（不區分大小寫） JavaScript 語法（區分大小寫）

background background

background-attachment backgroundAttachment

background-color backgroundColor

background-image backgroundImage

background-position backgroundPosition

background-repeat backgroundRepeat

color color

樣式標籤和屬性對照

CSS語法（不區分大小寫） JavaScript 語法（區分大小寫）

display display

list-style-type listStyleType

list-style-image listStyleImage

list-style-position listStylePosition

list-style listStyle

white-space whiteSpace

文字樣式標籤和屬性對照

CSS 語法（不區分大小寫） JavaScript 語法（區分大小寫）

font font

font-family fontFamily

font-size fontSize

font-style fontStyle

font-variant fontVariant

font-weight fontWeight

文本標籤和屬性對照

CSS 語法（不區分大小寫） JavaScript 語法（區分大小寫）

letter-spacing l etterSpacing

line-break lineBreak

line-height lineHeight

text-align textAlign

text-decoration textDecoration

text-indent textIndent

text-justify textJustify

text-transform textTransform

vertical-align verticalAlign

如何還原壓縮過的css或Js文件，如下圖

1、首先新建一個html文件，命名為test.html。

2、在test.html文件內,使用img標籤創建一張圖片顯示，並設置其id屬性為pic。

3、在test.html文件內,使用button標籤創建一個按鈕，按鈕名稱為“改變圖片樣式”。

4、在test.html文件內,給button綁定onclick點擊事件，當按鈕被點擊時，執行cha()函數。

5、在test.html文件內,在js標籤內，創建cha（）函數，在函數內，使用getElementById（）方法獲得img元素對象，再使用setAttribute（）方法設置img對象的class屬性為imagecss。

6、在test.html文件內,使用css定義imagecss的樣式，設置為紅色5px邊框，寬度為300px，就可以了。

js中用cssText設置css樣式的簡單方法

如果網頁中一個

id為“no”的標籤，暫且當div標籤來tell；

想要在js中設置這個div的css樣式，很一般的做法是：

var

obj

=

document.getElementByIdx_x_x(‘no’);

obj.style.width

=

‘400px’;

obj.style.height

=

‘300px’;

如果要設置一堆又一堆的css樣式呢，太麻煩了把、

一般情況下都會結合css來添加className或者改變className達到想要的效果，但是如果你create一個元素，難道還想這樣簡單點？那就要想別的辦法了~

於是大家就寫了一個又一個的函數，經典的兩個是：

var

obj

=

document.getElementByIdx_x_x(‘no’);

function

setStyle(obj,

css)

{

for(var

attr

in

obj){

obj.style[attr]

=

css[attr];

}

}

setStyle(obj,{width:”400px”,height:”300px”});

當然還有更簡單的，cssText：

var

obj

=

document.getElementByIdx_x_x(‘no’);

obj.style.cssText

=

“width:400px;

height:300px;”;

當然這種方法對於create的元素初始化css樣式來說很簡單很方便。

以上就是小編為大家帶來的js中用cssText設置css樣式的簡單方法的全部內容了，希望對大家有所幫助，多多支持腳本之家~