CSS 型付きオブジェクトモデルの使用

html

<p>
  <a href="https://example.com">Link</a>
</p>
<dl id="regurgitation"></dl>

js

// 要素を取得する
const myElement = document.querySelector("a");

// 注目する <dl> を取得する
const stylesList = document.querySelector("#regurgitation");

// computedStyleMap() ですべてのスタイルの計算値を取得する
const defaultComputedStyles = myElement.computedStyleMap();

// すべてのプロパティと値のマップを繰り返し、それぞれに<dt>と<dd>を追加する。
for (const [prop, val] of defaultComputedStyles) {
  // プロパティ
  const cssProperty = document.createElement("dt");
  cssProperty.appendChild(document.createTextNode(prop));
  stylesList.appendChild(cssProperty);

  // 値
  const cssValue = document.createElement("dd");
  cssValue.appendChild(document.createTextNode(val));
  stylesList.appendChild(cssValue);
}

css

p {
  font-weight: bold;
}

a {
  --color: red;
  color: var(--color);
}

<p>
  <a href="https://example.com">Link</a>
</p>
<dl id="regurgitation"></dl>

js

// 要素を取得する
const myElement = document.querySelector("a");

// 注目する <dl> を取得する
const stylesList = document.querySelector("#regurgitation");

// computedStyleMap() ですべてのスタイルの計算値を取得する
const allComputedStyles = myElement.computedStyleMap();

// 注目するプロパティの配列
const ofInterest = ["font-weight", "border-left-color", "color", "--color"];

// 注目するプロパティを反復処理する
for (const value of ofInterest) {
  // プロパティ
  const cssProperty = document.createElement("dt");
  cssProperty.appendChild(document.createTextNode(value));
  stylesList.appendChild(cssProperty);
  // 値
  const cssValue = document.createElement("dd");
  cssValue.appendChild(document.createTextNode(allComputedStyles.get(value)));
  stylesList.appendChild(cssValue);
}

html

<p>
   これは、いくらかの内容を持つ段落です。この例を Codepen や JSFiddle で開き、いくつかの特徴を変更してみてください。この段落の幅を指定したり、 ofInterest 配列に CSS プロパティを追加するなどして、いくつかの CSS を追加してみてください。
</p>
<table id="regurgitation">
  <thead>
    <tr>
      <th>プロパティ</th>
      <th>値</th>
      <th>単位</th>
    </tr>
</table>

js

// 調べたい要素を得る
const myElement = document.querySelector("p");

// 出力先の表を取得する
const stylesTable = document.querySelector("#regurgitation");

// computedStyleMap() ですべてのスタイルの計算値を取得する
const allComputedStyles = myElement.computedStyleMap();

// 注目するプロパティの配列
const ofInterest = [
  "padding-top",
  "margin-bottom",
  "font-size",
  "font-stretch",
  "animation-duration",
  "animation-iteration-count",
  "width",
  "height",
];
// 注目するプロパティを反復処理
for (const value of ofInterest) {
  // create a row
  const row = document.createElement("tr");

  // プロパティ名を追加
  const cssProperty = document.createElement("td");
  cssProperty.appendChild(document.createTextNode(value));
  row.appendChild(cssProperty);

  // 単位のない値
  const cssValue = document.createElement("td");
  // 長い小数値は小数点以下第 1 位に縮小
  let propVal = allComputedStyles.get(value).value;
  propVal = propVal % 1 ? propVal.toFixed(1) : propVal;
  cssValue.appendChild(document.createTextNode(propVal));
  row.appendChild(cssValue);

  // 単位の種類
  const cssUnit = document.createElement("td");
  cssUnit.appendChild(
    document.createTextNode(allComputedStyles.get(value).unit),
  );
  row.appendChild(cssUnit);

  // 表に行を追加
  stylesTable.appendChild(row);
}

css

:root {
  --mainColor: hsl(198, 43%, 42%);
  --black: hsl(0, 0%, 16%);
  --white: hsl(0, 0%, 97%);
  --unit: 1.2rem;
}

button {
  --mainColor: hsl(198, 100%, 66%);
  display: inline-block;
  padding: var(--unit) calc(var(--unit) * 2);
  width: calc(30% + 20px);
  background: no-repeat 5% center url(magicwand.png) var(--mainColor);
  border: 4px solid var(--mainColor);
  border-radius: 2px;
  font-size: calc(var(--unit) * 2);
  color: var(--white);
  cursor: pointer;
  transform: scale(0.95);
}

html

<button>Styled Button</button>

// get the element
const button = document.querySelector("button");

// Retrieve all computed styles with computedStyleMap()
const allComputedStyles = button.computedStyleMap();

// CSSMathSum Example
let btnWidth = allComputedStyles.get("width");

console.log(btnWidth); // CSSMathSum
console.log(btnWidth.values); // CSSNumericArray {0: CSSUnitValue, 1: CSSUnitValue, length: 2}
console.log(btnWidth.operator); // 'sum'

// CSSTransformValue
let transform = allComputedStyles.get("transform");

console.log(transform); // CSSTransformValue {0: CSSScale, 1: CSSTranslate, length: 2, is2D: true}
console.log(transform.length); // 1
console.log(transform[0]); // CSSScale {x: CSSUnitValue, y: CSSUnitValue, z: CSSUnitValue, is2D: true}
console.log(transform[0].x); // CSSUnitValue {value: 0.95, unit: "number"}
console.log(transform[0].y); // CSSUnitValue {value: 0.95, unit: "number"}
console.log(transform[0].z); // CSSUnitValue {value: 1, unit: "number"}
console.log(transform.is2D); // true

// CSSImageValue
let bgImage = allComputedStyles.get("background-image");

console.log(bgImage); // CSSImageValue
console.log(bgImage.toString()); // url("magicwand.png")

// CSSUnparsedValue
let unit = allComputedStyles.get("--unit");

console.log(unit);

let parsedUnit = CSSNumericValue.parse(unit);
console.log(parsedUnit);
console.log(parsedUnit.unit);
console.log(parsedUnit.value);

js

const allComputedStyles = document.querySelector("button").computedStyleMap();

js

// CSSUnparsedValue
const unit = allComputedStyles.get("--unit");

console.log(unit); // CSSUnparsedValue {0: " 1.2rem", length: 1}
console.log(unit[0]); // " 1.2rem"

js

const parsedUnit = CSSNumericValue.parse(unit);
console.log(parsedUnit); // CSSUnitValue {value: 1.2, unit: "rem"}
console.log(parsedUnit.unit); // "rem"
console.log(parsedUnit.value); // 1.2

js

const btnWidth = allComputedStyles.get("width");

console.log(btnWidth); // CSSMathSum
console.log(btnWidth.values); // CSSNumericArray {0: CSSUnitValue, 1: CSSUnitValue, length: 2}
console.log(btnWidth.operator); // 'sum'

js

const transform = allComputedStyles.get("transform");

console.log(transform); // CSSTransformValue {0: CSSScale, 1: CSSTranslate, length: 2, is2D: true}
console.log(transform.length); // 1
console.log(transform[0]); // CSSScale {x: CSSUnitValue, y: CSSUnitValue, z: CSSUnitValue, is2D: true}
console.log(transform[0].x); // CSSUnitValue {value: 0.95, unit: "number"}
console.log(transform[0].y); // CSSUnitValue {value: 0.95, unit: "number"}
console.log(transform[0].z); // CSSUnitValue {value: 1, unit: "number"}
console.log(transform.is2D); // true

js

const bgImage = allComputedStyles.get("background-image");

console.log(bgImage); // CSSImageValue
console.log(bgImage.toString()); // url("magicwand.png")