document.getElementById (‚ID‘) style.cursor nicht wie erwartet funktioniert

Warum ist die if-Anweisung nicht, hier zu arbeiten:document.getElementById (‚ID‘) style.cursor nicht wie erwartet funktioniert

<!DOCTYPE html> 
<html> 
<body> 

<style>#myP{cursor:pointer;}</style> 

<p id="myP">random text</p> 
<button type="button" onclick="myFunction()">alert aaa</button> 

<script> 
function myFunction(){ 
    if(document.getElementById("myP").style.cursor=="pointer"){ 
     alert("aaa"); 
    } 
} 
</script> 

</body> 
</html>

Außerdem möchte ich wissen, wie das mit einer if-Anweisung Arbeit zu machen verknüpften Cursor wie:

<style>#myP{cursor: url(../randomFolder/cursor.png) 5 8, auto;}</style>

Quelle

2017-08-06 garcia venture

Die '.style' -Eigenschaft von DOM-Elementknoten enthält nur Stile * direkt *, die über ein" style "-Attribut auf dem Element codiert sind. Es bietet keinen Zugriff auf Stile, die von CSS angewendet werden. Sie müssen etwas wie 'getComputedStyle()' verwenden, um diese Informationen zu erhalten. – Pointy

Okay danke. –

Verwenden Sie stattdessen:
if (window.getComputedStyle(document.getElementsByTagName('body')[0]).cursor == 'pointer')

Quelle

2017-08-06 15:10:55 gillyb

.style nur für Inline-CSS funktioniert. Mit window.getComputedStyle() können Sie Stile abrufen, die über nicht inline CSS festgelegt wurden.

Für Ihre zweite Frage ist es etwas komplizierter, den verknüpften Bildcursor zu vergleichen, als nur einen einfachen String wie "Zeiger" zu finden, da Sie einen Pfad enthalten, der wie die gesamte URL kanonisiert wird ("https://stacksnippets.net" ist in dem Pfad enthalten, obwohl es in dem CSS nicht angegeben wurde.) Es ist wahrscheinlich am besten, für einen Teilstring des vollständigen Cursor-Werts zu testen, damit Sie nicht auf Probleme stoßen, wo Ihr Code auf "Ihre Domäne" funktioniert .com“, aber nicht auf "www.yourdomain.com":

var myFunction = function() { 
 
    var A = document.getElementById('a'); 
 
    var B = document.getElementById('b'); 
 

 
    console.log(window.getComputedStyle(A).cursor); 
 
    console.log(window.getComputedStyle(B).cursor); 
 

 
    if (window.getComputedStyle(A).cursor == 'pointer') { 
 
    console.log("A matched"); 
 
    } 
 

 
    var bCursor = window.getComputedStyle(B).cursor; 
 
    if (bCursor.indexOf('cursor.png') > -1) { // not hardcoding the full URL here 
 
    console.log("B matched"); 
 
    } 
 
}

#a { 
 
    cursor: pointer 
 
} 
 

 
#b { 
 
    cursor: url(randomFolder/cursor.png) 5 8, auto; 
 
}

<p id="a">random text</p> 
 
<p id="b">more random text</p> 
 
<button onclick="myFunction()">alert</button>

Quelle

2017-08-06 15:28:48

Sie können jQuery mit der CSS-Funktion verwenden, und Sie erhalten die Art von Cursor, die Sie in einem Funktionscode benötigen.

Quelle

2017-08-06 15:44:46

document.getElementById (‚ID‘) style.cursor nicht wie erwartet funktioniert

Antwort

Verwandte Themen