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

Posted 2023-05-16

一个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包括两个样式的就不会了，希望知道的朋友帮下忙。

比较保险的做法

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 会被自动删除。 参考技术A 其实会修改一个就已经可以了的，做法都一样的...

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

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

你能改一个，其实就已经达到你想要的效果了
不必再追究改的是哪个 参考技术B document.getElementById("1").style.border="10px solid"; 参考技术C 用Jquery 来写

$(function()
$("#1").css("border","10px solid");
) 参考技术D 你要修改<style>标签中的内容？这个不可以改

JavaScript - CSS 元素样式不会改变？

【中文标题】JavaScript - CSS 元素样式不会改变？

【英文标题】：JavaScript - CSS element style won't change?

【发布时间】：2016-05-21 08:13:45

【问题描述】：

我正在制作一个扑克程序。我有一个网格用于卡片的去向。用户可以点击输入卡片，使图像出现在选定区域。每个 div 都有一个默认的 1px 虚线黑色边框，当用户单击其中一个时，边框将样式更改为 2px 纯蓝色边框。在该函数中，所有 div 的边框都应该恢复为默认值，然后边框样式会更改为单击的那个。问题是，如果用户在其中一个 div 中输入卡片，然后在该 div 仍处于选中状态时再次单击该 div，则该 div 将永远保持选中状态。这是函数：

var clickCardLocation = function(e)
    var target = e.target || e.srcElement; //target element of click
    var cardClass = document.getElementsByClassName("card"); //creates array of div class="card" elements
    var SELECTED = "2px solid blue";
    var DESELECTED = "1px dotted black";
    for (var i = 0; i < cardClass.length; i++) //loop through all card divs in gui
        cardClass[i].style.border = DESELECTED; //deselect them
    
    target.style.border = SELECTED; //change border for only clicked div
;

当我调试它时，它在逻辑上似乎是合理的，但它的行为并不正确。即使调试器说 cardClass[i].style.border = "1px dotted black"，边框仍然在屏幕上保持选中状态。

【参考方案1】：

没有getElementByClassName。有getElementsByClassName。我不确定调试器如何到达那里。

【讨论】：

那是我的错。我有点搞砸了。我会编辑它。

【参考方案2】：

我知道这个问题被问到已经快两年了，但我想我会回答这个问题......也许它会对某人有所帮助。

jQuery 方法：

$(document).ready(function()  //wait until the document is ready
  $('div.card').click(function()  //listen for click on divs with class 'card'
   $('div.card').each(function()  //for each div with class 'card'
    $(this).removeClass('selected'); //take off the 'selected' class that may be on there from other clicks
   );

   $(this).addClass('selected'); //apply the selected class to only the div that was clicked
  );
 );

'selected' 类有border: 2px solid blue