Question

javaScript 改CSS 样式 style.border-bottom 问题

document.getElementById(shui2).style.border-bottom="1px solid #000000" 动态改表格的 CSS 样式
这句 style.border-bottom 该怎么写
总提示缺少对像 换成 style.border 可以，但不是我想要的效果
各位高人谁研究过这种问题 帮忙解决一下。谢谢

Answer 1

用Javascript来控制CSS属性时，是驼峰式写法，即：去掉短横线，除第一个单词全部小写外，其余单词的首字母大写。

你的这个例子的正确写法是：
document.getElementById("shui2").style.borderBottom="1px solid #000000";

完整实例：
<div id="shui2">文字内容。</div>
<script type="text/javascript">
<!--
document.getElementById("shui2").style.borderBottom="1px solid #000000";
//-->
</script>

Answer 2

1. border 是复合式样式，所以修改是不能直接用border

2. javascript 修改CSS 样式，需要先选中元素，再修改样式。

下面是简单的代码，仅供参考：

<div style="width:100px; height:100px; border:1px solid red;" id="div"></div>

js代码：
<script>
    var oDiv = document.getElementById('div');
    oDiv.onclick = function(){
        this.style.borderBottomWidth = '10px';
    };
</script>

Answer 3

Vue实践-CSS样式position/display/float属性对比使用

Answer 4

我几天也遇到这个问题了？还不知道怎么解决-_-!!