Question

css/javascript 一个div包含两个样式class="div1 div2"用javascript修改其中一个样式的内容

一个id为 1 的div，包含了两个CSS样式div1,div2。我想通过document.getElementById("1")去修改其中一个样式，而不影响另一个样式。就拿div2举例，把css样式div2中border:1px solid;修改成border:10px solid;请问该如何去做，请知道的朋友帮忙，谢谢。
程序大体：
<style type="text/css">
.div1{
width:100px;
height:100px;
background-color:red;
}
.div2{
border:1px solid;
}
</style>
<script type="text/javascript" language="javascript">
function a(){
document.getElementById("1").??????? =
}
</script>

<div id="1" class="div1 div2" onclick="a();"></div>
修改只有一个样式的题目会，一个class包括两个样式的就不会了，希望知道的朋友帮下忙。

Answer 1

比较保险的做法

document.getElementById("1").setAttribute('style', 'border: 10px solid !important;');

前提是原先没有设置 style 属性。

如果原先有 style 属性

var style = document.getElementById("1").getAttribute('style');
document.getElementById("1").setAttribute('style', style + ';border: 10px solid !important;');

注意不能用
document.getElementById("1").style.border="10px solid !important";

这样 !important 会被自动删除。

Answer 2

其实会修改一个就已经可以了的，做法都一样的...

CSS是层叠样式表，到最后浏览器渲染的时候，起作用的样式只有一个！

而你用js处理的时候，它默认改的就是起作用的那一个，而不知道改的是div1还是2

你能改一个，其实就已经达到你想要的效果了
不必再追究改的是哪个

Answer 3

document.getElementById("1").style.border="10px solid";

Answer 4

用Jquery 来写

$(function(){
$("#1").css("border","10px solid");
})

Answer 5

你要修改<style>标签中的内容？这个不可以改