JavaScript，无法更改元素的样式

So this is my index file:

所以这是我的索引文件:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv="pragma" content="no-cache"/>
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name ="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
        <meta charset="utf-8"/>

        <title>TEST</title>

        <style>
            body {
              background: #000000;
              color:#cccccc;
              margin: 0px;
              padding: 0px;
              border: 0px;
            }
            canvas {
                      image-rendering: optimizeSpeed;
                      -webkit-interpolation-mode: nearest-neighbor;
                      -ms-touch-action: none;
                      margin: 0px;
                      padding: 0px;
                      border: 0px;
            }
            :-webkit-full-screen #canvas {
                 width: 100%;
                 height: 100%;
            }
            div.gm4html5_div_class
            {
              margin: 0px;
              padding: 0px;
              border: 0px;
            }

            div.gm4html5_login
            {
                 padding: 20px;
                 position: absolute;
                 border: solid 2px #000000;
                 background-color: #404040;
                 color:#00ff00;
                 border-radius: 15px;
                 box-shadow: #101010 20px 20px 40px;
            }
            div.gm4html5_cancel_button
            {
                 float: right;
            }
            div.gm4html5_login_button
            {
                 float: left;
            }
            div.gm4html5_login_header
            {
                 text-align: center;
            }

            :-webkit-full-screen {
               width: 100%;
               height: 100%;
            }
        </style>
    </head>

    <body>
        <div class="gm4html5_div_class" id="gm4html5_div_id">
            <canvas id="canvas" width="320" height="480">
               <p>Your browser doesn't support HTML5 canvas.</p>
            </canvas>
        </div>

        <script type="text/javascript" src="html5game/TEST.js?GPJZB=444106034"></script>
    </body>
</html>

I can't seem to change the style of div.gm4html5_div_class using js. I've tried a bunch of things, but no luck.

我似乎无法使用js更改div.gm4html5_div_class的样式。我尝试了很多东西,但没有运气。

Can anyone please help me with this? Also note that it might be because I don't know enough about js...

有人可以帮我这个吗?另请注意,这可能是因为我对js知之甚少...

3 个解决方案

#1

You can use document. querySelector for this

你可以使用文件。 querySelector为此

document.querySelector(".gm4html5_div_class").style.background = 'red'

body {
	background: #ffffff;
	color:#cccccc;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
canvas {
	image-rendering: optimizeSpeed;
	-webkit-interpolation-mode: nearest-neighbor;
	-ms-touch-action: none;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
:-webkit-full-screen #canvas {
	width: 100%;
	height: 100%;
}
div.gm4html5_div_class
{
	margin: 0px;
	padding: 0px;
	border: 0px;
	background: green;
}

div.gm4html5_login
{
	padding: 20px;
	position: absolute;
	border: solid 2px #000000;
	background-color: #404040;
	color:#00ff00;
	border-radius: 15px;
	box-shadow: #101010 20px 20px 40px;
}
div.gm4html5_cancel_button
{
	float: right;
}
div.gm4html5_login_button
{
	float: left;
}
div.gm4html5_login_header
{
	text-align: center;
}

:-webkit-full-screen {
	width: 100%;
	height: 100%;
}

<div class="gm4html5_div_class" id="gm4html5_div_id">
	<canvas id="canvas" width="320" height="480">
		<p>Your browser doesn't support HTML5 canvas.</p>
	</canvas>
</div>

Note: Actual background colour of the div was green(in css), changed the background to red using javascript

注意:div的实际背景颜色为绿色(在css中),使用javascript将背景更改为红色

here is the working Demo

这是工作演示

#2

You can update the class List using JavaScript.

您可以使用JavaScript更新类List。

var element = document.getElementById("YourDivsId");
element.classList.add("YourClass");

#3

you can select the target DOM element by different ways. for example using

您可以通过不同的方式选择目标DOM元素。例如使用

var ele = document.getElementsByClassName('gm4html5_div_class');

here the returned value is list of nodes with the given class. so to change the style of each individual element you have to use a loop and change individual element style ,

这里返回的值是具有给定类的节点列表。因此要更改每个元素的样式,您必须使用循环并更改单个元素样式,

for (var i=0; i<ele.length; i++) {
    ele[i].style.backgroundColor = "#e3e3e3";
}

another option

var ele = document.querySelector(".gm4html5_div_class");

the returned value is the firs occurrence of the c lass, so here you can change the style easily for only one element returned.

返回的值是c lass的第一次出现,所以在这里你只需要返回一个元素即可轻松更改样式。

if you want also to select all elements with the given class you can use

如果您还想选择具有给定类的所有元素,您可以使用它

var ele = document.querySelectorAll(".gm4html5_div_class");

and loop each element to change the style.

并循环每个元素以更改样式。

#1