JavaScript がインラインスタイルと埋め込みスタイルを取得する方法を示すコード例の共有-jsチュートリアル-php.cn

JavaScript がインラインスタイルと埋め込みスタイルを取得する方法を示すコード例の共有

黄舟

リリース： 2017-06-04 10:39:45

オリジナル

1940 人が閲覧しました

この記事では主に JavaScript のインラインスタイルと埋め込みスタイルの取得例を紹介します。興味のある方は、

<!--html-->
<p id="change">
change color
</p>

ログイン後にコピー

/*css*/
#change {
      border: 1px solid black;
      width: 200px;
      height: 200px;
      text-align: center;
      line-height: 200px;
    }

ログイン後にコピー

rree

カラーピッカーを設定するを参照してください。サイドバーでをクリックし、変更の背景色を選択した色に設定します。このとき、カラーピッカーの色はインラインスタイルを使用して追加されます。

//js
change.style.backgroundColor="purple";

ログイン後にコピー

問題:

埋め込みまたは外部導入を使用してカラーセレクターの色を追加すると、JavaScriptのstyle属性が無効であり、色の値を取得できません。

解決策:

JavaScript の style 属性は、インラインスタイルのみを取得できます。外部から導入されたスタイルと埋め込みスタイルの場合は、currentStyle 属性を使用する必要があります。ただし、currentStyle は Firefox および Chrome ではサポートされていないため、次の互換性コードを使用する必要があります:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>css</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .wrap {
      width: 220px;
      height: 200px;
      position: absolute;
      top: 300px;
      left: -172px;
    }

    .open-close {
      height: 45px;
      width: 48px;
      background: url("open-close.png") no-repeat;
      background-size: contain;
      border: 1px solid grey;
      border-left: none;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2;
    }

    .changer {
      height: 150px;
      width: 170px;
      position: absolute;
      top: 0;
      left: 0;
      border: 1px solid grey;
      text-align: center;
      padding-top: 8px;
    }

    .list > li {
      display: block;
      width: 36px;
      height: 36px;
      float: left;
      margin-left: 9%;
      margin-top: 10%;
    }

    #change {
      border: 1px solid black;
      width: 200px;
      height: 200px;
      text-align: center;
      line-height: 200px;
    }
  </style>
</head>
<body>
<p class="wrap" id="wrap">
  <!--html-->
  <p class="open-close" id="open"></p>
  <p class="changer">
    <span>颜色选择器</span>
    <ul class="list">
      <li class="color-orange" style="background-color: orange"></li>
      <li class="color-red" style="background-color: red"></li>
      <li class="color-blue" style="background-color: blue"></li>
      <li class="color-black" style="background-color: black"></li>
      <li class="color-green" style="background-color: green"></li>
      <li class="color-pink" style="background-color: pink"></li>
    </ul>
  </p>
</p>
<p id="change">
  change color
</p>
<script>
  var open = document.getElementById("open");
  var wrap = document.getElementById("wrap");
  var list = document.getElementById("list");
  var change = document.getElementById("change");
  var color_change = document.getElementsByTagName("li");
  change.style.backgroundColor = "purple";
  open.onmouseover = function () {
    wrap.style.left = 0 + "px";

  };
  open.onclick = function () {
    wrap.style.left = -172 + "px";
  };
  for (var i = 0; i < color_change.length; i++) {
    color_change[i].id = i;
    color_change[i].onclick = function () {
      change.style.backgroundColor = color_change[this.id].style.backgroundColor;
    }
  }
</script>
</body>
</html>

ログイン後にコピー

HTMLElement.prototype.defineGetter("currentStyle", function () {
      return this.ownerDocument.defaultView.getComputedStyle(this, null);
    });

ログイン後にコピー

以上がJavaScript がインラインスタイルと埋め込みスタイルを取得する方法を示すコード例の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

JavaScript がインラインスタイルと埋め込みスタイルを取得する方法を示すコード例の共有

JavaScript がインライン スタイルと埋め込みスタイルを取得する方法を示すコード例の共有

JavaScript がインラインスタイルと埋め込みスタイルを取得する方法を示すコード例の共有