js怎么修改css的border？

JavaScript06

js怎么修改css的border？,第1张

先使用DOM获取要修改的元素

例如

<div class="test"></div>

<script>

let element=document.querySelector("test")

//单独修改，注意ccs中间的杠去掉，改成驼峰命名：

element.style.borderLeft="1px solid red"

element.style.borderRight="1px solid red"

//或者使用 .style.cssText 属性同时修改：

elment.style.cssText="border-left:1px solid redborder-right:1px solid red"

</script>

获取样式中border-left的宽度：

var obj = document.getElementById('div1').

现代浏览器，以下三种方式都可以：

obj.style['border-left-width']

obj.style['borderLeftWidth']

obj.style.borderLeftWidth

如果是IE浏览器，则将style换成currentStyle:

obj.currentStyle['border-left-width']

obj.currentStyle['borderLeftWidth']

obj.currentStyle.borderLeftWidth

同理，获取border-right宽度，只需要将left换成right就可以了。

还需要注意，在IE浏览器中，综合属性border/borderLeft返回的值为'' 或者undefined。我们需要写出具体的属性名称来，比如borderLeftWidth，才能获取到正确的值。

JavaScript中获得css样式的值的方法：

<div style="border:solid 1px #000border-width:10px" id="test"></div>

1.元素的style（仅限于直接在元素上写style）

document.getElementById('test').style.borderWidth

2.currentStyle（IE，这个可以获取不在元素的style中的样式）

document.getElementById('test').currentStyle

3.getComputedStyle（低版本IE不支持，可获取伪类的样式）

getComputedStyle(document.getElementById('test'),null).borderWidth