Warum kann ich nicht mit JavaScript auf CSS-Eigenschaften zugreifen?

Ich bin nicht in der Lage CSS-Eigenschaften auf der div -elementigen mit dem folgenden Code abzurufen:Warum kann ich nicht mit JavaScript auf CSS-Eigenschaften zugreifen?

function myFunction() { 
 
    console.log(
 
    document.getElementById("myDiv").style.borderTopColor 
 
); 
 
}

div { 
 
    border-top-width: 15px; 
 
    border-top-color: green; 
 
}

<div id="myDiv">This is a div.</div> 
 

 
<button type="button" onclick="myFunction()">Return top border color</button>

Quelle

2017-10-24 thirstForKnowledge

weil 'element.style.whatever' den Inline-Stil für das Element zurückgibt, nicht den berechneten Stil, der das Ergebnis von Stylesheets ist ... was Sie brauchen, um' getComputedStyle (document. getElementById ("meinDiv")).borderTopColor' –

Bitte definieren Sie "_not working_". – Teemu

Ich habe nicht funktioniert, indem ich gesagt habe, dass die CSS-Eigenschaften auf dem Div nicht funktioniert, mit anderen Worten, ich sehe keine Grenze oder Breite. – thirstForKnowledge

Kombination Kommentare und Antworten von anderen zu verwenden. Für Details können Sie diese beziehen.

Zwei Änderungen vorgenommen werden, um es

Border Stil zu machen arbeiten: border-top-style: solid;

Ändern JS-Code die Rahmenfarbe zu erhalten: alert(getComputedStyle(document.getElementById("myDiv")).borderTopColor);

<!DOCTYPE html> <html> <meta charset="UTF-8"> <head> <style> div { border-top-width: 15px; border-top-color: green; border-top-style: solid; } </style> </head> <body> <div id="myDiv">This is a div.</div> <br> <button type="button" onclick="myFunction()">Return top border color</button> <script> function myFunction() { alert(getComputedStyle(document.getElementById("myDiv")).borderTopColor); } </script> </body> </html>

Quelle

2017-10-24 04:37:41

-1

Sie legen keinen Stil an der Grenze. Standardmäßig ist es keiner. Border-top-style

Oder Sie auch border-top: 15px solid green;

Auch für Arten bekommen, die Inline nicht definiert verwenden, können Sie window.getComputedStyle

div 
 
    { 
 
     border-top-width: 15px; 
 
     border-top-color: green; 
 
     border-top-style: solid; 
 
    }

<!DOCTYPE html> 
 
    <html> 
 
    <meta charset="UTF-8"> 
 
    <head> 
 
    </head> 
 
    <body> 
 
    <div id="myDiv">This is a div.</div> 
 
    <br> 
 
    <button type="button" onclick="myFunction()">Return top border color</button> 
 
    <script> 
 
    function myFunction() { 
 
      var elem = document.getElementById("myDiv"); 
 
      var style = window.getComputedStyle(elem, null); 
 
      alert(style.borderTopColor); 
 
     } 
 
    </script> 
 
    </body> 
 
    </html>

Quelle

2017-10-24 04:30:30 David

Ihr Code funktioniert nicht wie erwartet. –

@ c-smile Bearbeitete meine Antwort. – David

Verwenden Sie getComputedStyle, um die Eigenschaftswerte abzurufen. Außerdem sind Rahmen nicht sichtbar, es sei denn, Stil wird angegeben.

Die unten Snippet wird den Farbcode in RGB Format zurück

function myFunction(elem) { 
 
    var elem1 = document.getElementById(elem); 
 
    var style = window.getComputedStyle(elem1, null); 
 
    var getBorderTop = style.getPropertyValue("border-top-color") 
 
    console.log(getBorderTop); 
 
}

div { 
 
    border-style: solid; 
 
    border-top-width: 15px; 
 
    border-top-color: green; 
 
}

<div id="myDiv">This is a div.</div> 
 
<br> 
 
<button type="button" onclick="myFunction('myDiv')">Return top border color</button>

Quelle

2017-10-24 04:43:52 brk

 function myFunction() { 
    alert(window.getComputedStyle(document.getElementById("myDiv")).borderTopColor) 
      }

sollte es somethin Versuchen spielen here

Quelle

2017-10-24 04:49:15 kiranvj

-1

g wie folgt aus:

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
.mystyle 
{ 
    border-top: 15px solid green;  
} 
</style> 
</head> 
<body> 
<div id="myDiv">This is a div.</div> 
<br> 
<button type="button" onclick="myFunction()">Return top border color</button> 
<script> 
function myFunction() { 
     document.getElementById("myDiv").className = "mystyle"; 
} 
</script> 
</body> 
</html>

Quelle

2017-10-24 04:50:19

Nicht sicher, warum Sie eine Antwort abwerten würden, die funktioniert. –

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#myDiv { 
    border: thick solid blue; 
} 
</style> 
</head> 
<body> 

<div id="myDiv">This is a div.</div> 
<br> 
<button type="button" onclick="myFunction()">Change color of the top border</button> 

<script> 
function myFunction() { 
    alert(document.getElementById("myDiv").style.borderTopColor = "red"); 
} 
</script> 

</body> 
</html>

hier ist korrekt für die obere Grenze Farbe ändern.

Immer wenn wir die Style-Prop in dem Style-Tag definieren, dann haben wir die Berechtigung, es zu ändern und Style-Prop korrekt wie im Code angegeben zu definieren.

Ich hoffe, Sie verstehen den obigen Code. Wenn Sie Fragen haben, können Sie mich fragen:

Quelle

2017-10-24 05:00:56

Warum kann ich nicht mit JavaScript auf CSS-Eigenschaften zugreifen?

Antwort

Verwandte Themen