动态添加的CSS不适用于HTML元素

时间：2016-05-04 14:58:10

标签： javascript jquery html css webkit

我正在创建一个3D轮播（使用CSS），当用户点击按钮时会加载它。我有自己的轮播工作（即打开页面时轮播加载）但是当我尝试通过点击按钮动态激活轮播时，样式不会应用。

以下是可行的代码。当页面加载时，轮播会加载，你可以看到它非常好用。

body > div {
		width: 500px;
		margin: 50px auto;
		text-align: center;
}

figure {
	margin: 0;
}

.container {
	width: 500px;
	height: 300px;
	text-align: left;
	margin: 60px auto;
	-webkit-perspective: 1000px;
	-webkit-perspective-origin: 50% -25%;
}

.carousel {
	-webkit-transform-style: preserve-3d;
	-webkit-transform: translateZ(-540px);
	position: relative;
	margin: 0;
	width: 500px;
	-webkit-transition: 1s;
}

.carousel div {
    display: inline-block !important;
    height: auto !important;
	position: absolute;
    opacity: 0.9;
    text-align: center;
	-webkit-transition: 1s;
    width: 500px;
    height: 300px;
    background-color:rgba(203,203,203,0.5);
    border-style: solid;
}

.carousel div:nth-child(1) { -webkit-transform: translateZ(540px) scale(.8); }
.carousel div:nth-child(2) { -webkit-transform: rotateY(45deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(3) { -webkit-transform: rotateY(90deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(4) { -webkit-transform: rotateY(135deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(5) { -webkit-transform: rotateY(180deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(6) { -webkit-transform: rotateY(225deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(7) { -webkit-transform: rotateY(270deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(8) { -webkit-transform: rotateY(315deg) translateZ(540px) scale(.8); }

label {
	cursor: pointer;
	background: #eee;
	display: inline-block;
	border-radius: 50%;
	width: 30px;
	padding-top: 7px;
	height: 23px;
	font: .9em Arial;
}

label:hover {
	background: #ddd;
}

input {
	position: absolute;
	left: -9999px;
}

input:checked + label {
	font-weight: bold;
	background: #ddd;
}

input[value="1"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px); }
input[value="2"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-45deg); }
input[value="3"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-90deg); }
input[value="4"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-135deg); }
input[value="5"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-180deg); }
input[value="6"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-225deg); }
input[value="7"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-270deg); }
input[value="8"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-315deg); }

input[value="1"]:checked ~ .container .carousel img:nth-child(1) { -webkit-transform: translateZ(540px) scale(1); opacity: 1; }
input[value="2"]:checked ~ .container .carousel img:nth-child(2) { -webkit-transform: rotateY(45deg) translateZ(540px) scale(1); opacity: 1; }
input[value="3"]:checked ~ .container .carousel img:nth-child(3) { -webkit-transform: rotateY(90deg) translateZ(540px) scale(1); opacity: 1; }
input[value="4"]:checked ~ .container .carousel img:nth-child(4) { -webkit-transform: rotateY(135deg) translateZ(540px) scale(1); opacity: 1; }
input[value="5"]:checked ~ .container .carousel img:nth-child(5) { -webkit-transform: rotateY(180deg) translateZ(540px) scale(1); opacity: 1; }
input[value="6"]:checked ~ .container .carousel img:nth-child(6) { -webkit-transform: rotateY(225deg) translateZ(540px) scale(1); opacity: 1; }
input[value="7"]:checked ~ .container .carousel img:nth-child(7) { -webkit-transform: rotateY(270deg) translateZ(540px) scale(1); opacity: 1; }
input[value="8"]:checked ~ .container .carousel img:nth-child(8) { -webkit-transform: rotateY(315deg) translateZ(540px) scale(1); opacity: 1; }
<body>

  <div>

    <input checked id="one" name="multiples" type="radio" value="1">
    <label for="one">1</label>

    <input id="two" name="multiples" type="radio" value="2">
    <label for="two">2</label>

    <input id="three" name="multiples" type="radio" value="3">
    <label for="three">3</label>

    <input id="four" name="multiples" type="radio" value="4">
    <label for="four">4</label>

    <input id="five" name="multiples" type="radio" value="5">
    <label for="five">5</label>

    <input id="six" name="multiples" type="radio" value="6">
    <label for="six">6</label>

    <input id="seven" name="multiples" type="radio" value="7">
    <label for="seven">7</label>

    <input id="eight" name="multiples" type="radio" value="8">
    <label for="eight">8</label>

    <div class="container">
      <div class="carousel">
        <div class="member">
          <img src="" style="margin:auto">
          <h4>john</h4>
          <p style="text-align:center">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>john</h4>
          <p style="text-align:center">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>john</h4>
          <p style="text-align:center">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>john</h4>
          <p style="text-align:center">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>John</h4>
          <p style="text-align:center">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>John</h4>
          <p style="">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>John</h4>
          <p style="">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>John</h4>
          <p style="text-align:center">has the following info</p>
        </div>
      </div>
    </div>

  </div>

</body>

以下是不起作用的代码：

function load() {
  $("#activate-carousel-button").hide();
  $('#nav1').css('visibility', 'visible');
  $('head').append('<link rel="stylesheet" type="text/css" href="test.css" />');
  console.log("done");

}
body > div {
		width: 500px;
		margin: 50px auto;
		text-align: center;
}

figure {
	margin: 0;
}

.container {
	width: 500px;
	height: 300px;
	text-align: left;
	margin: 60px auto;
	-webkit-perspective: 1000px;
	-webkit-perspective-origin: 50% -25%;
}

.carousel {
	-webkit-transform-style: preserve-3d;
	-webkit-transform: translateZ(-540px);
	position: relative;
	margin: 0;
	width: 500px;
	-webkit-transition: 1s;
}

.carousel div {
    display: inline-block !important;
    height: auto !important;
	position: absolute;
    opacity: 0.9;
    text-align: center;
	-webkit-transition: 1s;
    width: 500px;
    height: 300px;
    background-color:rgba(203,203,203,0.5);
    border-style: solid;
}

.carousel div:nth-child(1) { -webkit-transform: translateZ(540px) scale(.8); }
.carousel div:nth-child(2) { -webkit-transform: rotateY(45deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(3) { -webkit-transform: rotateY(90deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(4) { -webkit-transform: rotateY(135deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(5) { -webkit-transform: rotateY(180deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(6) { -webkit-transform: rotateY(225deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(7) { -webkit-transform: rotateY(270deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(8) { -webkit-transform: rotateY(315deg) translateZ(540px) scale(.8); }

label {
	cursor: pointer;
	background: #eee;
	display: inline-block;
	border-radius: 50%;
	width: 30px;
	padding-top: 7px;
	height: 23px;
	font: .9em Arial;
}

label:hover {
	background: #ddd;
}

input {
	position: absolute;
	left: -9999px;
}

input:checked + label {
	font-weight: bold;
	background: #ddd;
}

input[value="1"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px); }
input[value="2"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-45deg); }
input[value="3"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-90deg); }
input[value="4"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-135deg); }
input[value="5"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-180deg); }
input[value="6"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-225deg); }
input[value="7"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-270deg); }
input[value="8"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-315deg); }

input[value="1"]:checked ~ .container .carousel img:nth-child(1) { -webkit-transform: translateZ(540px) scale(1); opacity: 1; }
input[value="2"]:checked ~ .container .carousel img:nth-child(2) { -webkit-transform: rotateY(45deg) translateZ(540px) scale(1); opacity: 1; }
input[value="3"]:checked ~ .container .carousel img:nth-child(3) { -webkit-transform: rotateY(90deg) translateZ(540px) scale(1); opacity: 1; }
input[value="4"]:checked ~ .container .carousel img:nth-child(4) { -webkit-transform: rotateY(135deg) translateZ(540px) scale(1); opacity: 1; }
input[value="5"]:checked ~ .container .carousel img:nth-child(5) { -webkit-transform: rotateY(180deg) translateZ(540px) scale(1); opacity: 1; }
input[value="6"]:checked ~ .container .carousel img:nth-child(6) { -webkit-transform: rotateY(225deg) translateZ(540px) scale(1); opacity: 1; }
input[value="7"]:checked ~ .container .carousel img:nth-child(7) { -webkit-transform: rotateY(270deg) translateZ(540px) scale(1); opacity: 1; }
input[value="8"]:checked ~ .container .carousel img:nth-child(8) { -webkit-transform: rotateY(315deg) translateZ(540px) scale(1); opacity: 1; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="inner">
    <div>
      <img src="Images/logo.png" height="130" width="120"></img>
    </div>
    <div id='nav1' style="visibility:hidden">
      <input checked id="one" name="multiples" type="radio" value="1">
      <label for="one">1</label>
      <input id="two" name="multiples" type="radio" value="2">
      <label for="two">2</label>
      <input id="three" name="multiples" type="radio" value="3">
      <label for="three">3</label>
      <input id="four" name="multiples" type="radio" value="4">
      <label for="four">4</label>
      <input id="five" name="multiples" type="radio" value="5">
      <label for="five">5</label>
      <input id="six" name="multiples" type="radio" value="6">
      <label for="six">6</label>
      <input id="seven" name="multiples" type="radio" value="7">
      <label for="seven">7</label>
      <input id="eight" name="multiples" type="radio" value="8">
      <label for="eight">8</label>
    </div>
    <div class="container" style="padding:8px">
      <div class="carousel">
        <div class="member">
          <img src="" style="margin:auto">
          <h4>john</h4>
          <p style="text-align:center">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>john</h4>
          <p style="text-align:center">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>john</h4>
          <p style="text-align:center">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>john</h4>
          <p style="text-align:center">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>John</h4>
          <p style="text-align:center">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>John</h4>
          <p style="">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>John</h4>
          <p style="">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>John</h4>
          <p style="text-align:center">has the following info</p>
        </div>
      </div>
    </div>
    <div id="activate-carousel-button">
      <button type="button" onclick="load();" class="btn btn-default">Click to activate carousel controls</button>
    </div>
  </div>
</body>

上述代码的目标如下：当用户单击按钮时，生成html并将其放入DOM中，然后将用于定义轮播的CCS样式表附加到html元素的头部。在上面的示例中，当用户单击按钮并重新应用CSS样式时，仅显示轮播控件，但该点表示轮播不起作用。

我认为问题的根源是控制旋转木马的按钮不起作用。似乎他们的webkit属性被某种方式覆盖（参见浏览器开发人员工具 - 我在chrome中看到它）。

我认为这是CSS中的一个特殊问题。

我尝试了什么：

将所有类选择器更改为ID选择器，并将相关HTML更改为使用id而不是class。即<div class="carousel">变为<div id="carousel">。我这样做是因为我认为id选择器是最具体的东西所以不应该被覆盖。然而，这不起作用。

我还尝试将!important添加到所有webkit属性中，因为这会强制浏览器在所有内容中使用它们。但是，这也不起作用。

可能导致此问题的原因以及如何解决？

编辑：我也尝试将以下行添加到我的js代码中：

$('.inner').trigger('create');

哪个也不起作用。

EDIT2：

我也试图强制刷新CSS：

$('.inner').css('display','block');

但这不起作用

2 个答案:

答案 0 :(得分：1)

您的CSS选择器不再匹配，因为您将输入和标签放在＃nav1中。如果您真的想继续使用CSS，可以删除＃nav1并分别隐藏所有输入和标签：

$('[name=multiples], [name=multiples] + label').css('visibility', 'hidden');

function load() {
  $("#activate-carousel-button").hide();
  $('[name=multiples], [name=multiples] + label').css('visibility', 'visible');
  $('head').append('<link rel="stylesheet" type="text/css" href="test.css" />');
  console.log("done");
}


$('[name=multiples], [name=multiples] + label').css('visibility', 'hidden');

function load() {
  $("#activate-carousel-button").hide();
  $('[name=multiples], [name=multiples] + label').css('visibility', 'visible');
  $('head').append('<link rel="stylesheet" type="text/css" href="test.css" />');
  console.log("done");
}
body > div {
		width: 500px;
		margin: 50px auto;
		text-align: center;
}

figure {
	margin: 0;
}

.container {
	width: 500px;
	height: 300px;
	text-align: left;
	margin: 60px auto;
	-webkit-perspective: 1000px;
	-webkit-perspective-origin: 50% -25%;
}

.carousel {
	-webkit-transform-style: preserve-3d;
	-webkit-transform: translateZ(-540px);
	position: relative;
	margin: 0;
	width: 500px;
	-webkit-transition: 1s;
}

.carousel div {
    display: inline-block !important;
    height: auto !important;
	position: absolute;
    opacity: 0.9;
    text-align: center;
	-webkit-transition: 1s;
    width: 500px;
    height: 300px;
    background-color:rgba(203,203,203,0.5);
    border-style: solid;
}

.carousel div:nth-child(1) { -webkit-transform: translateZ(540px) scale(.8); }
.carousel div:nth-child(2) { -webkit-transform: rotateY(45deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(3) { -webkit-transform: rotateY(90deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(4) { -webkit-transform: rotateY(135deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(5) { -webkit-transform: rotateY(180deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(6) { -webkit-transform: rotateY(225deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(7) { -webkit-transform: rotateY(270deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(8) { -webkit-transform: rotateY(315deg) translateZ(540px) scale(.8); }

label {
	cursor: pointer;
	background: #eee;
	display: inline-block;
	border-radius: 50%;
	width: 30px;
	padding-top: 7px;
	height: 23px;
	font: .9em Arial;
}

label:hover {
	background: #ddd;
}

input {
	position: absolute;
	left: -9999px;
}

input:checked + label {
	font-weight: bold;
	background: #ddd;
}

input[value="1"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px); }
input[value="2"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-45deg); }
input[value="3"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-90deg); }
input[value="4"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-135deg); }
input[value="5"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-180deg); }
input[value="6"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-225deg); }
input[value="7"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-270deg); }
input[value="8"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-315deg); }

input[value="1"]:checked ~ .container .carousel img:nth-child(1) { -webkit-transform: translateZ(540px) scale(1); opacity: 1; }
input[value="2"]:checked ~ .container .carousel img:nth-child(2) { -webkit-transform: rotateY(45deg) translateZ(540px) scale(1); opacity: 1; }
input[value="3"]:checked ~ .container .carousel img:nth-child(3) { -webkit-transform: rotateY(90deg) translateZ(540px) scale(1); opacity: 1; }
input[value="4"]:checked ~ .container .carousel img:nth-child(4) { -webkit-transform: rotateY(135deg) translateZ(540px) scale(1); opacity: 1; }
input[value="5"]:checked ~ .container .carousel img:nth-child(5) { -webkit-transform: rotateY(180deg) translateZ(540px) scale(1); opacity: 1; }
input[value="6"]:checked ~ .container .carousel img:nth-child(6) { -webkit-transform: rotateY(225deg) translateZ(540px) scale(1); opacity: 1; }
input[value="7"]:checked ~ .container .carousel img:nth-child(7) { -webkit-transform: rotateY(270deg) translateZ(540px) scale(1); opacity: 1; }
input[value="8"]:checked ~ .container .carousel img:nth-child(8) { -webkit-transform: rotateY(315deg) translateZ(540px) scale(1); opacity: 1; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="inner">
    <div>
      <img src="Images/logo.png" height="130" width="120"></img>
    </div>
      <input checked id="one" name="multiples" type="radio" value="1">
      <label for="one">1</label>
      <input id="two" name="multiples" type="radio" value="2">
      <label for="two">2</label>
      <input id="three" name="multiples" type="radio" value="3">
      <label for="three">3</label>
      <input id="four" name="multiples" type="radio" value="4">
      <label for="four">4</label>
      <input id="five" name="multiples" type="radio" value="5">
      <label for="five">5</label>
      <input id="six" name="multiples" type="radio" value="6">
      <label for="six">6</label>
      <input id="seven" name="multiples" type="radio" value="7">
      <label for="seven">7</label>
      <input id="eight" name="multiples" type="radio" value="8">
      <label for="eight">8</label>
    <div class="container" style="padding:8px">
      <div class="carousel">
        <div class="member">
          <img src="" style="margin:auto">
          <h4>john</h4>
          <p style="text-align:center">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>john</h4>
          <p style="text-align:center">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>john</h4>
          <p style="text-align:center">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>john</h4>
          <p style="text-align:center">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>John</h4>
          <p style="text-align:center">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>John</h4>
          <p style="">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>John</h4>
          <p style="">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>John</h4>
          <p style="text-align:center">has the following info</p>
        </div>
      </div>
    </div>
    <div id="activate-carousel-button">
      <button type="button" onclick="load();" class="btn btn-default">Click to activate carousel controls</button>
    </div>
  </div>
</body>

答案 1 :(得分：0)

您的示例结构略有不同。在第二个示例中，您将输入包装在id =＆＃39; nav1＆＃39;中。这意味着兄弟选择器不会起作用，因为.container不是你第一个例子中的输入兄弟。

一种简单的测试方法是删除控件周围的＃nav1 div包装并重试。

相关问题
最新问题