js設置盒子樣式,js設置盒子樣式不變

本文目錄一覽：

• 1、如何利用JavaScript調整盒子大小使盒子適應瀏覽器大小
• 2、如何用JS給div添加樣式
• 3、怎麼用js讓div盒子像IOS系統里的那樣抖動?
• 4、如何用js給html表單設置style
• 5、盒模型面試問題總結

如何利用JavaScript調整盒子大小使盒子適應瀏覽器大小

如果是頂層(父層標籤是body),也就是不嵌套到其他標籤,直接設置style為:position:absolute;left:50px;right:50px;也可以不設置position,設置margin-left:50px;margin-right:50px;或者padding-left:50px;padding-right:50px;如果用javascript,則可以用

window.onresize=function(){

document.getElementById(“box”).width=(function(){

var x=document.body.clientWidth-100;

return x;

})();

}參考樓上那位的

如何用JS給div添加樣式

用JS給div添加樣式是通過js操作css來實現的。

用js方法找到div的dom對象

通過js操作css的style屬性來改變div的樣式

具體舉例如下：

定義div:div id=”myDiv” style=”color:red”改變樣式測試/div

編寫js代碼：

var color = document.getElementById(“myDiv”).style.color;

if (color == “red”)

 document.getElementById(“myDiv”).style.color=”black”;

else

 document.getElementById(“myDiv”).style.color=”red”;

執行js代碼後，div原來是紅色會變成黑色，原來是別的顏色會變成紅色

怎麼用js讓div盒子像IOS系統里的那樣抖動?

可以結合css3實現。

css3可以設置動畫和過渡，動畫當中可以設置旋轉、移動和縮放等參數。

可以在長按的時候，更改為帶有動畫的類名，就可以執行css3的動畫了。

如何用js給html表單設置style

首先，把CSS和JS標籤style屬性對照表了解了：

CSS 和 JavaScript 標籤 style 屬性對照表：

盒子標籤和屬性對照

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 letterSpacing

line-break lineBreak

line-height lineHeight

text-align textAlign

text-decoration textDecoration

text-indent textIndent

text-justify textJustify

text-transform textTransform

vertical-align verticalAlign

!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”

HTML

HEAD

TITLE New Document /TITLE

/HEAD

script language=”javascript”

function validate(){

if (document.all(“name”).value == “”){

document.all(“name”).style[“borderColor”]=”red”;//就是這裡

return;

}

}

/script

BODY

input type=”text” name=”name”

/BODY

/HTML

盒模型面試問題總結

問題（1）content就是內容區域，padding是內邊距，margin是外邊距，width和height則要根據是什麼模型決定

問題（2）標準盒模型和IE盒子模型

CSS盒模型和IE盒模型的區別：

在 標準盒子模型中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。

IE盒子模型中，width 和 height 指的是內容區域+border+padding的寬度和高度。

問題（3）CSS如何設置這兩種模型：

 設置當前盒子為 標準盒模型（默認）：     box-sizing: content-box;

 設置當前盒子為 IE盒模型 ： box-sizing: border-box;

問題（4）JS如何設置、獲取盒模型對應的寬和高

方式一：通過DOM節點的 style 樣式獲取：

（1）element.style.width/height;

        div id=”div1″ style=”width: 100px”111/div

        div id=”div2″222/div

        script

            var oDiv1 = document.getElementById(“div1”);

          console.log(oDiv1.style.width ) ;

        /script

缺點：通過這種方式，只能獲取行內樣式，不能獲取內嵌的樣式和外鏈的樣式。

方式二（通用型）

// window.getComputedStyle(element).width/height;

    div id=”div1″ 111/div

        div id=”div2″222/div

        script

            var oDiv1 = document.getElementById(“div1”);

          console.log( window.getComputedStyle(oDiv1).width ) ;

        /script

這種方式能兼容 Chrome、火狐。是通用型方式。

方式三（IE獨有的）：

//element.currentStyle.width/height;

          var oDiv1 = document.getElementById(“div1”);

            console.log( oDiv1.currentStyle.width);

和方式二相同，但這種方式只有IE獨有。獲取到的是運行完之後的寬高（三種css樣式都可以獲取）。

方式四：

// element.getBoundingClientRect().width/height;

          var oDiv1 = document.getElementById(“div1”);

            console.log(oDiv1.getBoundingClientRect().width);

這種方式獲得到的寬度是內容content+padding+border

此 api 的作用是：獲取一個元素的絕對位置。絕對位置是視窗 viewport 左上角的絕對位置。

此 api 可以拿到四個屬性：left、top、width、height。

上面的四種方式，要求能說出來區別，以及哪個的通用型更強。

問題（5）margin塌陷/margin重疊：

前端系統複習之CSS盒模型 – 李天下 – CSDN博客