Różne sposoby dostępu do wartości atrybutów przy użyciu JavaScript

Question

document.getElementById('myId').style; 

jest jednym ze sposobów uzyskiwania dostępu do atrybut stylu .. Również możemy zrobić to samo przy użyciu document.getElementById('myId').getAttribute('style');

Jaka jest różnica między tymi dwoma sposobami uzyskania wartości atrybutów .. A który z nich jest lepszy?

Answer 1

W pierwszym przykładzie nie masz dostępu do atrybutu style, ale do właściwości style. Wartość właściwości może być dowolna, w przypadku, gdy właściwość style jest obiektem. W drugim przykładzie masz dostęp do atrybutu stylu tagu. Wartość atrybutu może być tylko łańcuchem.

W przypadku niektórych atrybutów istnieje między nimi mapowanie. Jeśli więc ustawisz atrybut style w węźle HTML, twoja właściwość style zostanie zaktualizowana, a Twój styl zostanie zastosowany. Jednak nie zawsze tak jest: znanym błędem w niektórych wersjach IE (przynajmniej do IE7) jest to, że ten rodzaj mapowania jest uszkodzony, więc ustaw atrybut nie jest odzwierciedlany w tej właściwości.

Tak więc, jeśli chcesz ustawić atrybut w węźle HTML, musisz użyć drugiego. Ale jeśli chcesz uzyskać dostęp do własności obiektu, który reprezentuje reprezentuje węzeł HTML, musisz użyć pierwszego.

W przypadku modelu style zdecydowanie zaleca się pierwszą.

Żeby było jasne z przykładu (w nowoczesnych przeglądarkach):

document.body.style.border = "1px solid red"; 
console.log(document.body.style); // [object CSSStyleDeclaration] 
console.log(document.body.getAttribute("style")); // "border: 1px solid red;" 

Answer 2

nie ma różnicy.

document.getElementById('myId').style; 

jest skrótem

document.getElementById('myId').getAttribute('style'); 

jedynym zastosowaniem dla getAttribute („attributeName”) byłoby, gdyby attributeName nie jest poprawnym javascript nazwa zmiennej, więc enkapsulacji go w cudzysłowie byłoby jedynym sposobem aby uzyskać do niego dostęp.

Answer 3

getAttribute zwróci wartość niestandardowych atrybutów, jak i standardowych.

Notacja właściwości obiektu nie będzie, ponieważ niestandardowe atrybuty nie zostaną przekonwertowane na właściwości.

<a id="test" foo="bar"> ... </a>​ 

<script> 

    console.log(document.getElementById('test').foo); // undefined 

    console.log(document.getElementById('test').getAttribute('foo')); // "bar" 

</script> 

Answer 4

Tak nie ma różnicy i szczegółowy przykład można znaleźć pod następującym adresem: https://developer.mozilla.org/en/DOM/element.style#Example