Question

所以这是我的索引文件：

<!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>

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

任何人都可以帮我这个吗？另请注意，这可能是因为我对js不太了解......

Answer 1

您可以将document. querySelector用于此

＆＃13;

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

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

注意： div的实际背景颜色为green（在css中），使用javascript将背景更改为red

这是工作 Demo

Answer 2

您可以使用JavaScript更新班级列表。

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

Answer 3

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

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

此处返回的值是具有给定类的节点列表。所以要改变每个元素的风格你必须使用循环并改变单个元素样式，

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

另一个选项

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

返回的值是c的第一次出现 lass，所以在这里你可以轻松地改变样式，只返回一个元素。

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

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

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

JavaScript，无法更改元素＆＃39;样式

3 个答案: