オペレーティング・プロパティ、運転スタイル - DOMプログラミング

1. Operation属性

1.1 HTMLのDOM属性に対応する属性

<div>
  <label for="username">User Name: </label>
  <input type="input" name="username" id="username" class="text" value="">
</div>

var input = document.getElementsByTagName('input')[0];
console.log(input.id); // 'username'
console.log(input.type); // 'text'
console.log(input.className); // 'text'

console.log(document.getElementsByTagName('label')[0].htmlFor); // 'username'

操作の1.2プロパティ

1.2.1プロパティアクセサ

// 读取属性
input.className; // 'text'
input[id]; // 'username'

// 写入属性（可增加新的属性或改写已有属性）。
input.value = 'newValue';
input[id] = 'newId';

1.2.2のgetAttribute / setAttributeメソッド

// 读取属性（获取到的均为属性的字符串）
var attribtue = element.getAttribute('attributeName');

// 写入属性（可增加新的属性或改写已有属性）
element.setAttribute('attributeName', value);

1.2.3データセット

あるカスタムプロパティ、HTMLElementプロパティがあるdata-*属性のセット。
主要素にデータを保存するために使用。属性文字列が得られます。

<div id='user' data-id='1234' data-username='x' data-email='[email protected]'></div>

var div = document.getElementById('user');
console.log(div.dataset.id); // '1234'
console.log(div.dataset.username); // 'x'
console.log(div.dataset.email); // '[email protected]'

2.動作スタイル

2.1 CSSのDOMオブジェクトは、対応します

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="sample.css">
        <style>
            body {
                margin: 30px;
            }
        </style>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
        <script>
        $(function(){
            var link = document.querySelector('link');
            console.log(link);
            var style = document.querySelector('style');
            console.log(style);
            console.log(document.styleSheets); // 整个页面的全部样式（不包括行内样式）
        });
        </script>
    </head>
    <body>
        <p style="font-size:1rem;">Hello</p>
    </body>
</html>

スタイルシートの場所：

（たとえば、インラインスタイル<p style="font-size:1rem;"></p>）
（例えば、内部スタイルシート<style>body {margin: 30px;}</style>）
（例えば外部スタイルシート<link rel="stylesheet" type="text/css" href="sample.css">）

2.2内部スタイルシート

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="sample.css">
        <style>
            body {
                margin: 30px;
            }
        </style>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
        <script>
        $(function(){
            var style = document.querySelector('style');
            console.log(style.sheet.cssRules); // CSSRuleList {0: CSSStyleRule, length: 1}
            console.log(style.sheet.cssRules[0]);
            // CSSStyleRule {selectorText: "body", style: CSSStyleDeclaration, styleMap: StylePropertyMap, type: 1, cssText: "body { margin: 30px; }", …}
            console.log(style.sheet.cssRules[0].selectorText); // body
            console.log(style.sheet.cssRules[0].style);
            // CSSStyleDeclaration {0: "margin-top", 1: "margin-right", 2: "margin-bottom", 3: "margin-left", alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
            console.log(style.sheet.cssRules[0].style.margin); // 30px
        });
        </script>
    </head>
    <body>
        <p style="font-size:1rem;">Hello</p>
    </body>
</html>

2.3インラインスタイル

var p = document.getElementsByTagName('p')[0];
console.log(p.style['font-size']); // 1rem

注：これは、使用することはできませんp.style.font-size、とだけ書き込むことができますp.style['font-size']。

2.4スタイルの変更

2.4.1 element.style

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="sample.css">
        <style>
            body {
                margin: 30px;
            }
        </style>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
        <script>
        $(function(){
            var p = document.getElementsByTagName('p')[0];
            p.style.color = 'red';
            p.style['padding'] = '5px';
        });
        </script>
    </head>
    <body>
        <p style="font-size:1rem;">Hello</p>
    </body>
</html>

2.4.2 element.style.cssText

使用したelement.style.cssTextインラインスタイルの複数が同時に提供されます。

var p = document.getElementsByTagName('p')[0];
p.style.cssText = 'color:blue;padding:10px';

2.4.3変更クラス

.add {
    color:green;
    padding:20px;
}

var p = document.getElementsByTagName('p')[0];
p.className += ' add';

2.4.3スタイルシートを交換してください

var link = document.querySelector('link');
link.setAttribute('href', 'sample2.css');

2.5スタイルを取得します

2.5.1 element.style

<p style="font-size:1rem;color:blue;">Hello</p>

var p = document.querySelector('p');
console.log(p.style.color); // blue
console.log(p.style['font-size']); // 1rem

注：このメソッドは、スタイルのインラインスタイルシートを得ることができ、内部スタイルシート外部スタイルシートのスタイルを取得することはできません。

2.5.2 window.getComputedStyleが（）

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="sample.css">       
        <style>
            body {
                margin: 30px;
            }
            p {
                font-size:1rem;
            }
        </style>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
        <script>
        $(function(){
            var p = document.querySelector('p');
            console.log(window.getComputedStyle(p).color); // rgb(0, 0, 255)
            console.log(window.getComputedStyle(p)['font-size']); // 16px
            console.log(window.getComputedStyle(p)['background-color']); // rgb(255, 255, 0)
        });
        </script>
    </head>
    <body>
        <p style="color:blue;">Hello</p>
    </body>
</html>

/* sample.css */
p {
    background-color:yellow;    
}

注意：スタイルをここでは、読み取り専用属性を変更することはできませんため。

参考：