一旦应用了javascript函数，我无法通过CSS修改HTML元素

Question

所以我用css属性创建了以下DIV元素：

HTML：

<div id="transparentdiv">
this is a div
</div>

的CSS：

#transparentdiv
{
height: 0px;
left: 0px;
position: absolute;
top: 0px;
transition: all 1.25s;
width: 0px;
}

接下来，当用户点击按钮时，我有以下javascript修改div：

transparentdiv.style.borderRadius="20px";
transparentdiv.style.boxShadow="-6px -6px 6px blue, 6px -6px 6px blue, 
                                      -6px 6px 6px blue, 6px 6px 6px blue";
transparentdiv.style.backgroundColor="black";
transparentdiv.style.display="block";
transparentdiv.style.height="80%";
transparentdiv.style.left="10%";
transparentdiv.style.opacity="0.9";
transparentdiv.style.top="10%";
transparentdiv.style.width="80%";

一旦dIV被javascript修改，我就不能再用css修改DIV了。我似乎唯一能做的就是使用javascript删除div。知道这里发生了什么吗？如果需要，我有所有代码。这是一个很长的剧本。

Answer 1

您需要做的就是添加

var transparentdiv = document.getElementById('transparentdiv');

在你的javascript函数中

工作示例 here

Answer 2

您可以使用CSS DIV属性修改!important，该属性会覆盖由Javascript生成的内联css，如下所示： -

#transparentdiv{background:#FFF !important;