js设置盒子样式,js设置盒子样式不变

发布时间：2022-11-24

本文目录一览：

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 样式获取：

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

推荐文章