gpt4 book ai didi

javascript - jQuery 创建的元素不继承所有 CSS 属性

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

我环顾四周,但找不到可以以最干净的方式解决这个问题的问题。大多数响应通过创建一个非常专业或直接的脚本来规避这个更仲裁的过程。我想反射(reflect)一个灵活且有组织的页面/脚本结构。

基本上,我想在这里创建一个根据 jQuery 脚本增长的列表:

window.onload = function()
{

var feed = document.getElementById("feed");

//for every number between 100 and 200
for (var i = 100; i < 200; i++)
{
if ( i % 17 == 0 && i % 2 == 0) //if number evenly divisible by 17 and 2
{
var newFeedItem = document.createElement("feedElementBox");
var feedElementTextNode = document.createTextNode(i);
newFeedItem.appendChild(feedElementTextNode);
feed.appendChild(newFeedItem);

}
}
//return feed;
}

这是 HTML 网页本身:

<!DOCTYPE html>
<html>
<head>
<script src="../js/jsPlay.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
feedElementBox {
border-left:1px solid;
border-right:1px solid;
border-bottom:1px solid;
border-top:1px solid;
height:100px;
width:100px;
padding: 5px;
text-align:center;
}
</style>
</head>
<h3>feed embedded</h3>

<body>

<div id="feed"></div>

</body>
</html>

以下是在 chrome 上呈现的网页的一些屏幕截图:

chrome的显示元素之一的css属性: chrome's display of the css attributes one of the elements

chrome说的网页,注意css出现了两次 what chrome says the web page, notice that css appears twice

渲染的元素^ the rendered elements

是否有解决方案可以让我让元素继承 CSS 属性?如您所见,元素默认为文本大小,这不是我想要的。我想要一个静态分配的空间并垂直对齐这些生成的元素。

我是 jQuery、CSS 和 HTML 的新手。另请注意,此网页显示在另一个网页的 iframe 中。

最佳答案

简答:添加显示: block 到 feedElementBox 声明 block 。

您已经声明了一个 CSS 规则集,其中选择器匹配任何具有标签类型 feedElementBox 的元素。由于要添加到页面的元素属于 feedElementBox 类型,因此 feedElementBox 声明 block 中的样式全部应用于这些元素。

您已通过检查 chrome 调试器中的元素确认了这一点。在第三张图片中,您可以看到元素与 feedElementBox 选择器匹配,因此应用了适当的样式。

您的问题不是 CSS 规则未能应用,而是您没有正确设置元素样式以获得您想要的结果。正如@scrowler 提到的,您没有正当理由使用自定义元素,而应该使用 div 元素。要应用样式,请为适用的元素提供一个 feedElementBox 类,并将您的 css 选择器更改为 .feedElementBox 而不是 feedElementBox。默认情况下,div 元素具有 block 显示属性。

关于javascript - jQuery 创建的元素不继承所有 CSS 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24565380/

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