Question

尝试在我的网站顶部，左侧和右侧添加动态边框...我网站上的页面是动态的......这是他们改变了...我需要一个脚本来调整div到网页简单......

有人都知道吗？我从这个论坛上的某个人那里得到了这个剧本，但我试图避免使用jQuery（不要问）......

<p class="bgr">Content content content</p>
<script type="text/javascript">
$('.bgr').each(function(i,el){
$('<div class="bgr_left"/>').height($(this).height()+'px').appendTo($(this));
// similar for top, right, and bottom
});
</script>

Answer 1

以跨浏览器的方式计算维度（作为你正在提取和设置的高度（））是一个非常乏味的繁琐任务。除了其他原因之外，还有为什么像jQuery这样的库是首先构建的。

我强烈建议你不在没有任何框架的情况下这样做 - 如果你不喜欢jQuery，那很好，但是使用另一个。

Answer 2

如果没有JS框架，这将是非常繁琐的。

打破它，你正在做：

使用CSS类“bgr”set
对于每个人，添加一个div，其高度设置为找到的项目的相同渲染高度。

1。）vanilla Javascript（可能是较新的浏览器）中没有标准的getElementsByClass（）函数。

2.。）获取实际渲染高度需要大量代码，因为IE报告的高度与其他浏览器不同。

3。）构建和附加新的DIV并不是那么难，但仍然比呈现的jQuery方法复杂得多

<script>
  var matches = getElementsByClass('bgr');//you need to implement
  var match, CALCULATED_HEIGHT, newDiv;
  for(var i=0;i<matches.length;i++){
    match = matches[i];
    CALCULATED_HEIGHT = getRenderedHeight(match);//you need to implement
    newDiv = document.createElement('div');
    newDiv.setAttribute('className', 'bgr_left');//can't use 'class' due to IE bugs
    newDiv.style.height = CALCULATED_HEIGHT + 'px';//can't use setAttribute for 'style' due to IE bugs
    match.appendChild(newDiv);
  }
</script>

Answer 3

正如许多其他人所说，你真的不应该试图避免使用jQuery。但是，如果您真的想要，请按照以下步骤操作。

首先，您需要找到要添加角落的所有元素。您的jQuery代码正在查找className为bgr的所有元素。没有第三方代码，你不能这样做。最简单的解决方案是使用getElementsByClassName method。

然后，运行以下代码（其中elems是要添加角落的元素数组）：

for (var i = 0; i < elems.length; i++) {
    var outer = elems[i];

    var outerHeight = outer.offsetHeight, outerWidth = outer.offsetWidth;

    outer.innerHtml += '<div class="bgr_left" style="height:' + outerHeight + 'px" />'
        + '<div class="bgr_right" style="height:' + outerHeight + 'px" />'
        + //Etc...;
}

请注意，这将重新创建外部元素内的所有元素（通过重置innerHtml）;如果您愿意，可以使用createElement和appendChild来避免这种情况。

Answer 4

正如SLaks所提到的，您可以使用getElementsByClassName，或者您可以使用选择器API，但您需要获得所有具有感兴趣类别的内容。

http://webkit.org/blog/156/queryselector-and-queryselectorall/

对于循环，您可以使用foreach函数，在此页面上查找：http://www.hunlock.com/blogs/Mastering_Javascript_Arrays

所以你可以：

var list = document.querySelectorAll(".bgr");
list.foreach(function(i,el){
...
});

您需要一个选择器来查找要修改的div，然后您应该通过设置style.height属性来设置高度，并将“px”附加到数字的末尾非常重要。

图书馆抽象出编写这些选择器的必要性，但您可以编写自己的通用选择器。这是代码中的主要工作。

对于foreach，我提到的链接有代码，以防你在不支持foreach的浏览器上使用它。

Answer 5

希望正确：

(function() {
    var elements = document.body.getElementsByTagName('*'),
        divLeft = document.createElement('div');

    divLeft.className = 'bgr_left';

    for(var i = elements.length; i--; ) {
        var current = elements[i];
        if(/(^|\s)bgr(\s|$)/.test(current.className)) {
            divLeft.style.height = current.offsetHeight + 'px';
            current.appendChild(divLeft.cloneNode(false));
        }
    }
})();

检查MDC和MSDN，了解有关如何确定元素尺寸的更多信息。

帮助将这段代码从jQuery转换为普通的javascript

5 个答案: