Question

我环顾四周，但找不到能够以最干净的方式解决这个问题的问题。通过创建一个非常专业或直接的脚本，大多数响应都会绕过这个更加仲裁的过程。我想反映灵活有序的页面/脚本结构。

基本上，我想创建一个根据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中。

Answer 1

简短回答：补充一下 display: block 到feedElementBox声明块。

您已声明了一个CSS规则集，其中选择器匹配任何标记类型为feedElementBox的元素。由于要添加到页面的元素是feedElementBox类型，因此feedElementBox声明块中的样式都应用于这些元素。

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

您的问题不是CSS规则无法应用，而是您没有正确设置元素的样式以获得所需的结果。正如@scrowler所提到的，你没有充分的理由使用自定义元素，而应该使用div元素。要应用样式，请为适用的元素提供feedElementBox类，并将css选择器更改为.feedElementBox而不是feedElementBox。 div元素默认具有块显示属性。

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

1 个答案: