javascript - 动态添加的 CSS 不适用于 HTML 元素-6ren

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

转载作者：太空宇宙更新时间：2023-11-04 10:18:35

我正在创建一个 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');

这也不起作用。

编辑2:

我也尝试过这个来强制刷新 CSS:

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

但这也没用

最佳答案

您的 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>

关于javascript - 动态添加的 CSS 不适用于 HTML 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37031423/

文章推荐： linux - centos中不同的python版本

文章推荐： html - 使用 Shopify 定位或 float 到右上角

javascript - 执行存在于输入值字段中的 javascript - JavaScript
我有一个 html 格式的表单: 我需要得到 JavaScript在value input 字段执行，但只能通过表单的 submit .原因是页面是一个模板所以我不控制它(不能有
javascript - JavaScript 代码片段正在破坏其他 JavaScript
我管理的论坛是托管软件，因此我无法访问源代码，我只能向页面添加 JavaScript 来实现我需要完成的任务。我正在尝试用超链接替换所有页面上某些文本关键字的第一个实例。我还根据国家/地区代码对这些
javascript - JavaScript 如何使新页面包含更多 JavaScript？
我正在使用 JS 打开新页面并将 HTML 代码写入其中，但是当我尝试使用 document.write() 在新页面中编写 JS 时功能不起作用。显然，一旦看到，主 JS 就会关闭。用于即将打开的
javascript - Javascript 引擎如何在浏览器中执行 Javascript？
提问不是为了解决问题，提问是为了更好地理解系统专家!我知道每当你将 javascript 代码输入 javascript 引擎时，它会立即由 javascript 引擎执行。由于没有看过Engi
javascript - 如何将 JavaScript 变量从一个 JavaScript 文件传递到另一个 JavaScript 文件？
我在一个文件夹中有两个 javascript 文件。我想将一个变量的 javascript 文件传递到另一个。我应该使用什么程序？最佳答案 window.postMessage用于跨文档消息。使
javascript - javascript 中的 javascript 输入问题
我有一个练习，我需要输入两个输入并检查它们是否都等于一个。如果是 console.log 正则 console.log false 我试过这样的事情: function isPositive(fir
javascript - 在加载其他 javascript 库的页面上嵌入 Javascript？
我正在做一个Web应用程序，计划允许其他网站(客户端)在其页面上嵌入以下javascript: 我的网络应用程序位于 http://example.org 。我不能假设客户端网站的页面有 JQue
javascript - 从 Javascript 内部调用 Javascript
目前我正在使用三个外部 JS 文件。我喜欢将所有三个 JS 文件合而为一。尽一切可能。我创建 aio.js 并在 aio.js 中 src="https://code.jquery.com/
javascript - AngularJS/javascript javascript 对象的特殊排序顺序
我有例如像这样的数组: var myArray = []; var item1 = { start: '08:00', end: '09:30' } var item2 = {
javascript - 在 Javascript 内部执行 Javascript？
所以我正在制作一个 Chrome 扩展，它使用我制作的一些 TamperMonkey 脚本。我想要一个“主”javascript 文件，您可以在其中包含并执行其他脚本。我很擅长使用以下行将其他 jav
javascript - 如何将变量从 javascript 移动到 javascript？
我有 A、B html 和 A、B javascript 文件。并且，如何将 A JavaScript 中使用的全局变量直接移动到 B JavaScript 中？示例 JavaScript) va
javascript - 从 javascript 调用 javascript
我需要将以下整个代码放入名为 activate.js 的 JavaScript 中。你能告诉我怎么做吗？ var int = new int({ seconds: 30, mark
javascript - 将变量值从一个 JavaScript 传递到另一个 JavaScript
我已经为我的 .net Web 应用程序创建了母版页 EXAMPLE1.Master。他们的 I 将值存储在 JavaScript 变量中。我想在另一个 JS 文件中检索该变量。示例1.大师:-
javascript - 有没有开源库可以在浏览器中使用 Javascript 来整理 Javascript？
是否有任何库可以用来转换这样的代码: function () { var a = 1; } 像这样的代码: function () { var a = 1; } 在我的浏览器中。因为我在 Gi
javascript - javascript 中的参数列表后缺少语法 javascript 错误 )
我收到语法缺失 ) 错误 $(document).ready(function changeText() { var p = document.getElementById('bidp
javascript - 第一个 JavaScript 完成后启动第二个 JavaScript
我正在制作进度条。它有一个标签。我想调整某个脚本完成的标签。在找到可能的解决方案的一些答案后，我想出了以下脚本。第一个启动并按预期工作。然而，第二个却没有。它出什么问题了？代码如下: HTML:
javascript - 为什么外部 javascript 库会阻止我页面上的 javascript？
这里有一个很简单的问题，我简单的头脑无法回答:为什么我在外部库中加载时，下面的匿名和onload函数没有运行？我错过了一些非常非常基本的东西。 Library.js 只有一行:console.log(
javascript - 如何区分代码内 javascript 和客户端 javascript
我知道 javascript 是一种客户端语言，但如果实际代码中嵌入的 javascript 代码以某种方式与在控制台上运行的代码不同，我会尝试找到答案。让我用一个例子来解释它: 我想创建一个像 Mi
javascript - 将 Javascript 内联到不显眼的 JavaScript？
我如何将这个内联 javascript 更改为 Unobtrusive JavaScript？谢谢! 感谢您的回答，但它不起作用。我的代码是: PHP js文件 document.getElem
javascript - 如何将 JavaScript 对象导出为 JavaScript？
我正在寻找将简单的 JavaScript 对象“转储”到动态生成的 JavaScript 源代码中的最优雅的方法。目的:假设我们有 node.js 服务器生成 HTML。我们在服务器端有一个对象x。

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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