suchen

Heim >Web-Frontend >js-Tutorial >Beispielcode-Sharing, wie Javascript Inline-Stile und eingebettete Stile erhält

Beispielcode-Sharing, wie Javascript Inline-Stile und eingebettete Stile erhält

黄舟
黄舟Original
2017-06-04 10:39:452017Durchsuche

In diesem Artikel werden hauptsächlich Beispiele für das Erhalten von Inline-Stilen und eingebetteten Stilen mit Javascript vorgestellt, auf die sich interessierte Freunde

über StilAttributeLegen Sie das Hintergrundmuster fest

<!--html-->
<p id="change">
change color
</p>
/*css*/
#change {
      border: 1px solid black;
      width: 200px;
      height: 200px;
      text-align: center;
      line-height: 200px;
    }
//js
change.style.backgroundColor="purple";

Stellen Sie in der Seitenleiste einen Farbwähler ein und ändern Sie die Hintergrundfarbe. Stellen Sie dies zu diesem Zeitpunkt auf die ausgewählte Farbe ein , wird die Farbe des Farbwählers mithilfe von Inline-Stilen hinzugefügt. 



<!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>

Problem:

Wenn die Farbe der Farbe Wenn der Picker über eine eingebettete oder externe Einführung hinzugefügt wird, ist das Stilattribut von JavaScript ungültig und der Farbwert kann nicht abgerufen werden.

Lösung:

Das Stilattribut von JavaScript kann nur Inline-Stile abrufen. Für extern eingeführte Stile und eingebettete Stile müssen Sie

aktuell verwenden Style-Eigenschaft. Allerdings wird currentStyle unter Firefox und Chrome nicht unterstützt und der folgende Kompatibilitätscode muss verwendet werden: 

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


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</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%;
    }
    .color-orange {
      background-color: orange;
    }
    .color-red {
      background-color: red;
    }
    .color-blue {
      background-color: blue;
    }
    .color-blank {
      background-color: black;
    }
    .color-green {
      background-color: green;
    }
    .color-pink {
      background-color: pink;
    }
    #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"></li>
      <li class="color-red"></li>
      <li class="color-blue"></li>
      <li class="color-blank"></li>
      <li class="color-green"></li>
      <li class="color-pink"></li>
    </ul>
  </p>
</p>
<p id="change">
change color
</p>
<script>
  HTMLElement.prototype.defineGetter("currentStyle", function () {
    return this.ownerDocument.defaultView.getComputedStyle(this, null);
  });
  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].currentStyle.backgroundColor;
    }
  }
</script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonBeispielcode-Sharing, wie Javascript Inline-Stile und eingebettete Stile erhält. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ein tiefgreifendes Verständnis der vielen Möglichkeiten, wie JavaScript Objekte erstellt, und ihrer Vor- und NachteileNächster Artikel：Ein tiefgreifendes Verständnis der vielen Möglichkeiten, wie JavaScript Objekte erstellt, und ihrer Vor- und Nachteile

In Verbindung stehende Artikel

Mehr sehen