gpt4 book ai didi

javascript - 如何将 CSS 应用于 Javascript 添加的元素

转载 作者:行者123 更新时间:2023-11-28 18:08:03 25 4
gpt4 key购买 nike

在我的应用程序中,我应用了一些 CSS onload,然后使用 Jquery 附加了一些 html!我的问题是 CSS 没有应用于新添加的元素。我如何确保 CSS 应用于新附加的 html?

请看jsfiddle

HTML:

<body onload="loaded()">
<div id="a">
<div class="main">a</div>
<div class="main">b</div>
<div class="main">c</div>
<div class="main">d</div>
</div>
<input type="button" value="click Me" onclick="clickMe()" />
</body>

JavaScript:

function loaded() {
var posts = $('.main'),
postCount = posts.length,
postHalf = Math.round(postCount / 2),
wrapHTML = '<div class="tab"></div>';
posts.slice(0, postHalf).wrapAll(wrapHTML);
posts.slice(postHalf, postCount).wrapAll(wrapHTML);
}

function clickMe() {
$("#a").append("<div class='main'>e</div>");
}

CSS:

.tab {
width: 10%;
border: 1px solid black;
float: left;
}

最佳答案

您新添加的元素有类 .main,在 css 中您有 .tab,因此显然不会将 css 应用到您的新元素。

如果我正确理解您想要实现的目标,我会说您需要在添加新元素后重新运行 loaded() 函数。所以新的 div 被包裹在 .tab div 中,就像它发生在现有元素上一样。

但是你需要在调用 loaded() 函数之前解包元素,否则会发生一些奇怪的事情。像这样:

function loaded() {
var posts = $('.main'),
postCount = posts.length,
postHalf = Math.round(postCount / 2),
wrapHTML = '<div class="tab"></div>';
posts.slice(0, postHalf).wrapAll(wrapHTML);
posts.slice(postHalf, postCount).wrapAll(wrapHTML);
}

function clickMe() {
$('.main').unwrap();
$("#a").append("<div class='main'>e</div>");
loaded();
}

这应该可以正常工作:http://jsfiddle.net/MfSga/6/

此外,不要在html里面使用onload onclick。在 js 文件中执行。

关于javascript - 如何将 CSS 应用于 Javascript 添加的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19215338/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com