How to change from jQuery to JavaScript

Question

$(".normalText").css("border", "0px solid green");

How would you replace this jQuery statement with a plain JavaScript equivalent?

document.getElementsByClassName( className ); for modern browsers only, otherwise there's no javascript replacement to get elements by className. — BGerrissen
– BGerrissen, Commented Apr 5, 2011 at 11:22
@Mithun P: It sounds like he wants vanilla JavaScript functions to replace the jQuery ones (I know, right?!) — stealthyninja
– stealthyninja, Commented Apr 5, 2011 at 11:23

Mathias Bynens · Accepted Answer · 2011-04-05 11:29:25Z

2

To get a NodeList containing all elements with class="normalText", you could use:

var els = document.getElementsByClassName('normalText');

And then loop through them:

var els = document.getElementsByClassName('normalText'),
    len = els.length;
while (len--) {
  els[len].style.border = '3px solid hotpink';
}

getElementsByClassName isn’t supported in some older browsers. If support is an issue, you could use a fallback like this or this.

On the other hand, if you’re only supporting modern browsers, you might as well use querySelectorAll and Array#forEach:

[].forEach.call(document.querySelectorAll('.normalText'), function(el) {
  el.style.border = '3px solid hotpink';
});

edited Apr 5, 2011 at 11:29

answered Apr 5, 2011 at 11:24

Mathias Bynens

151k54 gold badges224 silver badges254 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gabriele Petrioli · Accepted Answer · 2011-04-05 12:04:41Z

1

For modern browsers you can use the .getElementsByClassName() method ^{MDC docs}

document.getElementsByClassName('normalText');

for more modern you can use the .querySelectorAll() method ^{MDC docs}

document.querySelectorAll('.normalText');

for older browsers you can do (taken from http://robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/)

function getElementsByClassName(oElm, strTagName, strClassName){
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    strClassName = strClassName.replace(/\-/g, "\\-");
    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
    var oElement;
    for(var i=0; i<arrElements.length; i++){
        oElement = arrElements[i];
        if(oRegExp.test(oElement.className)){
            arrReturnElements.push(oElement);
        }
    }
    return (arrReturnElements)
}

and call it with

getElementsByClassName(document, "*", "normalText");

edited Apr 5, 2011 at 12:04

answered Apr 5, 2011 at 11:26

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

2 Comments

Mathias Bynens Over a year ago

document.querySelector will only return the first matched element.

Gabriele Petrioli Over a year ago

@Mathias, so true.. had the querySelectorAll in mind ... thanks for catching it

Headshota · Accepted Answer · 2011-04-05 11:23:37Z

0

Try

document.getElementsByClassName('normalText').style.border = '0px solid green';

answered Apr 5, 2011 at 11:23

Headshota

21.4k13 gold badges63 silver badges82 bronze badges

Comments

Ailef · Accepted Answer · 2011-04-05 11:23:46Z

0

There's nothing like this built-in into Javascript as far as I know (edit: actually there's getElementsByClassName which works in some browsers only).

I guess your best chance is to write a function which loops through each DOM element and compares the class field with its argument.

answered Apr 5, 2011 at 11:23

Ailef

7,92612 gold badges43 silver badges57 bronze badges

Collectives™ on Stack Overflow

How to change from jQuery to JavaScript

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related