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博客