帮助将这段代码从jQuery转换为纯javascript

正在尝试在我的网站顶部、左侧和右侧添加动态边框。。。我网站上的页面是动态的。。。那就是他们改变了。。。我需要有一个脚本，适应一个简单的网页div

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

内容

$（'.bgr'）。每个（函数（i，el）{ $（''）.height（$（this）.height（）+'px'）.appendTo（$（this））； //顶部、右侧和底部类似 });

---

在纯JavaScript中，以跨浏览器方式计算尺寸（如获取和设置的高度（））是一项极其繁琐的任务。这就是为什么像jQuery这样的库首先被构建的原因

---

我强烈建议您不要在没有任何框架的情况下进行此操作-如果您不喜欢jQuery，可以使用另一个框架。

以跨浏览器的方式计算维度（如在那里获取和设置的高度（））在纯JavaScript中是一项极其繁琐的任务。这就是为什么像jQuery这样的库首先被构建的原因

---

我强烈建议您不要在没有任何框架的情况下使用jQuery，如果您不喜欢jQuery，可以使用另一个框架。

正如许多其他人所说，您真的不应该试图避免使用jQuery。然而，如果你真的想，这里有一些方法

---

首先，需要找到所有要添加角点的元素。jQuery代码正在查找类名为

bgr

的所有元素。如果没有第三方代码，就无法做到这一点。最简单的解决方案是使用一个

然后，运行以下代码（其中

elems

是要添加角点的元素数组）：

for（变量i=0；i

---

注意，这将重新创建外部元素内部的所有元素（通过重置

innerHtml

）；如果您愿意，可以使用

createElement

和

appendChild

来避免这种情况。

正如许多其他人所说，您确实不应该试图避免jQuery。然而，如果你真的想，这里有一些方法

---

首先，需要找到所有要添加角点的元素。jQuery代码正在查找类名为

bgr

的所有元素。如果没有第三方代码，就无法做到这一点。最简单的解决方案是使用一个

然后，运行以下代码（其中

elems

是要添加角点的元素数组）：

for（变量i=0；i

---

注意，这将重新创建外部元素内部的所有元素（通过重置

innerHtml

）；如果您愿意，可以使用

createElement

和

appendChild

来避免这种情况。

正如SLaks所提到的，您可以使用

getElementsByClassName

或使用选择器API，但您需要获得所有感兴趣的类

对于循环，您可以使用foreach函数，请在此页面上查找：

因此，您可以：

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

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

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

---

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

正如SLaks提到的，您可以使用

getElementsByClassName

或者您可以使用选择器API，但是您需要获得所有感兴趣的类

对于循环，您可以使用foreach函数，请在此页面上查找：

因此，您可以：

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

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

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

---

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

如果没有JS框架，这将非常乏味

分解它，您正在执行以下操作：

• 查找CSS类设置为“bgr”的所有元素
• 对于其中的每一个项目，将一个高度设置为与找到的项目相同的渲染高度的div追加

1.）普通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>

var matches=getElementsByClass（'bgr'）//你需要实施
var匹配，计算的_高度，newDiv；
对于（var i=0；i来说，如果没有JS框架，这将非常乏味

分解它，您正在执行以下操作：


查找CSS类设置为“bgr”的所有元素
对于其中的每一个项目，将一个高度设置为与找到的项目相同的渲染高度的div追加

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

2）获得第
<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>

(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));
        }
    }
})();