Help converting this piece of code from jQuery to plain javascript

Question

Hi...

Trying to add dynamic borders on my website top, left, and right sides... The pages on my site are dynamic... That is they change... I need to have a script that adapts a div to the webpage simply...

Anyone know this? I got this script from some guy on this forum, but I am trying to avoid jQuery (don't ask)...

<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

Calculating dimensions in a cross-browser fashion (as the height() you're fetching and setting there) is an incredibly tedious task to do in plain JavaScript. That's, among other reasons, why libraries such as jQuery were built in the first place.

I'd strongly advise you NOT to do it without any framework - if you don't like jQuery, fine, but use another one.

Answer 2

As many other people have said, you really shouldn't try to avoid jQuery. However, if you really want to, here's how to do it.

---

First, you'll need to find all of the elements that you want to add corners to. Your jQuery code is finding all elements with a className of bgr. You can't do that simply without third-party code. The simplest solution is to use a getElementsByClassName method.

Then, run the following code (where elems is an array of elements to add corners to):

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...;
}

Note that this will re-create all of the elements inside the outer element (by resetting innerHtml); If you want to, you could use createElement and appendChild to avoid this.

Answer 3

As SLaks mentioned you can use getElementsByClassName or you can use the Selector API, but you will need to get everything that has the class of interest.

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

For the loop, you can use a foreach function, look for it on this page: http://www.hunlock.com/blogs/Mastering_Javascript_Arrays

So you can have:

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

You will need a selector to find the div that you want to modify, and then you should set the height by setting style.height property, and appending the "px" to the end of the number is important.

Libraries abstract out the need to write these selectors, but you can write your own general purpose one. That is the main effort in your code.

For the foreach, the link I mentioned has code in case you are using this on a browser that doesn't support foreach.

Answer 4

Without a JS framework, this will be mighty tedious.

Breaking it down, you are doing:

• Find all elements with the CSS class "bgr" set
• For each of them, append a div with the height set to the same rendered height of the item found.

1.) There is no standard getElementsByClass() function available in vanilla Javascript (newer browsers maybe).

2.) Obtaining the actual rendered height requires a mess of code because IE reports height differently than other browsers.

3.) Building and appending the new DIV isn't that hard, but is still much more complicated than the presented jQuery approach

<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 5

Hopefully correct:

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

Check MDC and MSDN for further information on how to determine an elements dimensions.