本文目录一览：
- 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博客
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/229270.html