1、css属性を変更する
1. HTML 要素の style 属性値を変更します。
インラインスタイル
| 属性 | 説明 (両方サポートされています) |
| スタイル | 特定の CSS 属性に続いて、HTML スタイルの属性値の要素を読み取り、変更します。 |
| style.cssText | HTMLの複数のstyle属性値を読み取って変更したり、複数のcss属性を変更したりする方が便利です |
/*例子:*/
el=document.getElementById('one');
el.style.fontSize='36px';
el.style.cssText='width:5px;font-size:red';2.クラス属性の値を変更する
className 属性
例に直接移動します
<p id="one" class="hot">一</p>
.hot {color:red;}
.cool {color:blue;}
el=document.getElementById('id');
el.className='cool';classList 属性のメソッド: HTML 要素の class 属性値の追加、削除、変更に使用でき、複数のクラス名を一度に変更できます。
| 方法 | 注 (ie10-11) 部分的なサポート |
| 追加(c,c) | 要素のクラス属性値にクラス名 c を追加します。 |
| 削除(c,c) | 要素の class 属性からクラス名 c を削除します。 |
| replace(o,n) | 要素クラス属性値の o を n に置き換えます。 |
| トグル(c) | 要素のスタイルを切り替えます。クラスに c がある場合は c を削除し、そうでない場合は c を追加します |
<p id="one" class="hot bold">一</p>
.hot {color:red;}
.cool {color:blue;}
el.classList.toggle('bold');次に、要素のサイズと位置
(1) 内マージン領域のサイズ
| 読み取り専用属性 | 説明する |
| clientWidth | 要素のパディング領域の幅 (ピクセル単位) |
| クライアントの高さ | 要素のパディング領域の高さ(ピクセル単位) |
| クライアント左 | 要素の左境界線の幅 (ピクセル単位) |
| クライアントトップ | 要素の上マージンの幅（ピクセル単位） |
先生の写真をまた使わせていただきます。
(2) 要素のフレームサイズとオフセット
| 読み取り専用属性 | 説明する |
| オフセット幅 | 要素の境界領域 (スクロールバーを含む) の幅 (ピクセル単位) |
| オフセット高さ | 要素の境界領域 (スクロールバーを含む) の高さ (ピクセル単位) |
| 左オフセット | 要素の境界領域の左端から offsetParent 要素のパディング領域の左端までのオフセットのピクセル単位の距離。 |
| オフセット上 | 要素の境界領域の上端から offsetParent 要素のパディング領域の上端までのオフセットのピクセル単位の距離。 |
offsetParent は要素の最新の位置決めの祖先です (位置は静的ではありません)。それ以外の場合はビューポートです (公式ドキュメントにはボディであると記載されています)。
固定要素の offsetParent はビューポートであり、後の 2 つのプロパティは親要素に適用され、位置決め要素の子要素になります。
(3) 要素のサイズとビューポートに対する位置
getBoundingClientRect() は、ブロック要素に適した四角形オブジェクトを返します。ブロック要素に適しています。
getClientRect() は四角形オブジェクトのコレクションを返します。また、インライン要素のライン ボックスも取得できます。
ビューポートに対する相対的な距離は次のとおりです。
| 読み取り専用属性 | 説明する |
| 上 | 上境界線の外端からビューポートの上端までのピクセル値 |
| 底 | 下の境界線の外端からビューポートの上端までのピクセル値 |
| 左 | 左境界線の外端からビューポートの左側までのピクセル値 |
| 右 | ビューポートの右境界線の外端から左端までのピクセル値 |
| 幅 | 境界領域の幅のピクセル値 |
| 身長 | 境界領域の高さのピクセル値 |
(4) 要素の実際のパディング領域
| 属性 | |
| スクロール幅 | 要素のパディング領域の幅を取得します（コンテンツを非表示にするためのオーバーフローまたはスクロールを含む） |
| スクロール高さ | 要素の内側のマージン領域の高さを取得します（オーバーフローまたはスクロールして非表示になるコンテンツを含む） |
| スクロールトップ | 要素の表示コンテンツの上部を基準とした要素の上部パディング外端のピクセル値を取得または設定します |
| 左にスクロール | 要素の表示コンテンツの左側を基準とした要素の左内側マージンの外端のピクセル値を取得または設定します |
(5) 要素がビューポート内の特定の位置までスクロールします。
el.scrollIntoView(arg)
引数なしまたは true: 上端がビューポートの一番上までスクロールします。
false: 下端がビューポートの一番下までスクロールします。
let a=document.querySelector("a");
a.scrollIntoView();//true
a.scrollIntoView(false);(6) 要素属性の計算値を取得する
window.getComputedStyle(要素、オプションの疑似要素)
すべての CSS プロパティと値のオブジェクトを返します。
getComputedStyle(el)['width']
getComputedStyle(el).width
getcomputedStyle(el)['line-height']
getComputedStyle(el).lineHeight
getComputeStyle(el,'::after').position