Question

我想将元素的height设置为window.innerheight，但我必须在CSS中进行此操作，因为不知何故我无法访问该元素以使用javascript来更改其样式。有没有办法做到这一点？像在javascript中更改CSS类一样？

我尝试过：

document.getElementById('root').style.setProperty('--view-height', window.innerHeight +'px');

和CSS：

.menu {
    height: var(--view-height) !important;
}

它可以工作，但是较旧的浏览器不支持CSS Variables，所以我不能使用它，但是我想要类似的东西。

编辑：有很多答案，但他们都使用javascript，我说我不能使用js来设置元素样式！我只想按CSS类样式进行操作

Answer 1

在javascript中设置height，而不要使用variables

document.getElementById('root').style.height=window.innerHeight +'px';

请参阅示例：

 document.getElementById('root').style.height=window.innerHeight +'px';

#root{
background-color:red;
}

<div id="root"></div>

要进行编辑，请不要使用js，请使用height:100vh;：

#root{
height:100vh;
background-color:red;
}

<div id="root"></div>

Answer 2

在现代浏览器中，您可以使用：

export JAVA_HOME="/usr/lib/jvm/java-8-openjdk-amd64"

尽管如此，为了解决您的具体情况，我会回答לבני מלכה。

Answer 3

也许改用正确的CSS：

window.innerHeight +'px'的高度与使用100vh的高度相同。单位vh表示“视口高度”，而100vh表示内部窗口的完整高度。

请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths

Answer 4

使用vh单元是执行此操作的正确方法。（尽管Mahboobeh Mohammadi表示它与ios不兼容） height: 100vh;是视图的整个高度。

Answer 5

对于普通Js

function addClassById (_id,_class) {
  document.getElementById(_id).classList.add(_class);
}

function removeClassById (_id,_class) {
  document.getElementById(_id).classList.remove(_class);
}

addClassById("root","newClass")

我建议您使用JQUERY，它非常易于使用。将此CDN链接放在您的head标签上，然后使用它。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

//This is for change css
$("#root").css({
"background-color": "yellow", 
"font-size": "200%"
});



 // This is how to add class
$("#root").addClass('newClass');





// This is how to remove class
 $("#root").removeClass('newClass')

希望对您有帮助。

从JavaScript更改CSS类

5 个答案: