Javascript .css not working nor jquery .blue

Question

I'm having all sorts of trouble styling simple html in js and jQuery It seems a jsfiddle is used here to illustrate. I am new to it and don't see console output or the desired results so I ask this question to learn more about how so can help; I did search so for .css not working and variations

javascript

    .css() is jQuery.
    .style is js.

document.getElementsByTagName('pre').text.css("color: blue;"); jquery: const preSentences = $("pre").text().split(".") console.log({preSentences})

    //no err no workee in chrome

// preSentences.forEach(function(str) { $(this).css("color: blue; border: 1px solid black")}); // $.each(preSentences, function(str) { $(this).blue }) // preSentences[1].style("color: blue; border: 1px solid black");

the fiddle is here I think - I tried the embed link and it doesn't show up: https://jsfiddle.net/Lz8nh50o/

`document.getElementsByTagName('pre').text.css("color: blue;")` not even close to valid use of native DOM methods. - Did you check the developer tools console for errors? — Jaromanda X, Nov 12 '17 at 02:00

score 1 · Answer 1 · answered Nov 12 '17 at 01:23

1

getElementsByTagName will return an array of tags, and you have to loop through each one to set the style. Also, you are using .css() but that is a jQuery function. You have to use style.

Try this:

var preTags = document.getElementsByTagName('pre');
for(var i=0; i<preTags.length; i++){
  preTags[i].style.color='blue';
}

answered Nov 12 '17 at 01:23

li_

124
1
9

I see this works. A jquery equivalent would help me straighten out my understanding. – Clyde W. Phillips Jr. Nov 12 '17 at 01:30
const jsts = document.getElementsByTagName('pre'); jsts.style.color='blue'; – Clyde W. Phillips Jr. Nov 12 '17 at 01:38
'jsts' is an array of tags, you have to set the style individually to each tag. Try console.log(jsts) instead of console.log({jsts}) – li_ Nov 12 '17 at 01:41

score 1 · Answer 2 · answered Nov 12 '17 at 01:34

You can iterate though the htmlCollention with ES6 for-of loop, it seems cleaner.

let list = document.getElementsByTagName('pre')

for (let currentElement of list){
    currentElement.style.color ='blue';
}

jQuery equivalent is

jQuery('pre').css('color','blue');

score 0 · Answer 3 · edited Nov 12 '17 at 06:49

0

// JS
document.querySelectorAll('pre').forEach(str => {str.style.color='blue';})

//jQuery
jQuery('pre').css('color','blue');

edited Nov 12 '17 at 06:49

Maria Ines Parnisari

16,584
9
85
130

answered Nov 12 '17 at 03:11

Clyde W. Phillips Jr.

9
3

document.querySelectorAll('pre').forEach(str => str.style.color='blue') . In this case you can even drop the curvy brackets and the semicolon. – Alex Lavriv Nov 12 '17 at 06:30

Javascript .css not working nor jquery .blue

3 Answers3