JavaScript, um Probleme mit einem Elemente Stil zu ändern

Das ist also meine Indexdatei:JavaScript, um Probleme mit einem Elemente Stil zu ändern

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

ich nicht den Stil von div.gm4html5_div_class mit js zu ändern scheinen. Ich habe eine Menge Dinge ausprobiert, aber kein Glück.

Kann mir bitte jemand dabei helfen? Beachten Sie auch, dass es sein könnte, weil ich über js nicht genug wissen ...

Quelle

2016-08-04 kingsushi001

Bitte fügen Sie die js, die Sie versucht haben/haben derzeit versuchen, zu ändern 'div.gm4html5_div_class' – haxxxton

" Ich habe eine Menge Dinge ausprobiert ... "Einen Namen? – smarx

Sie document. querySelector für dieses

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

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

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

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

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

Hinweis verwenden: tatsächliche Hintergrundfarbe des div war green (in css), änderte den Hintergrund zu red mit Javascript

sie e ist die Funktion Demo

Quelle

2016-08-04 08:32:44

funktioniert das? –

Dieser hat super für mich gearbeitet. Vielen Dank für die Hilfe. – kingsushi001

Sie können die Klassenliste mit JavaScript aktualisieren.

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

Quelle

2016-08-04 08:40:13 RemanBroder

Sie können das Ziel-DOM-Element auf verschiedene Arten auswählen. zum Beispiel

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

hier den Rückgabewert verwendet, ist die Liste der Knoten mit der angegebenen Klasse. so, um den Stil jedes einzelnen Elements zu ändern Sie eine Schleife verwenden und einzelne Element Stil ändern,

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

eine andere Option

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

der zurückgegebene Wert ist die Tannen Auftreten des c lass , so können Sie hier den Stil einfach für nur ein zurückgegebenes Element ändern.

, wenn Sie auch alle Elemente mit der angegebenen Klasse auswählen möchten, können Sie

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

und Schleife jedes Element verwenden, um die Art zu ändern.

Quelle

2016-08-04 09:28:58 Kal

JavaScript, um Probleme mit einem Elemente Stil zu ändern

Antwort

Verwandte Themen