Web design: jQuery css() and JavaScript style: boundary testing

The tutor discusses what he noticed while experimenting with jQuery css() and JavaScript style.

JavaScript has a style function that allows you to access style attributes of an element. For example, to get an element’s color:

var e1_color=document.getElementById(“e1”).style.color;

However, as I understand, you’re not meant to harvest the entire style at once:

var e1_style=document.getElementById(“e1”).style; //not intended

Furthermore, let’s imagine you do so anyway, then try to convey that style to another element:

var e1_style=document.getElementById(“e1”).style;
document.getElementById(“e2”).style=e1_style;
//won’t work, according to my tests

Curiously, though, I’ve found that

var e1_style=document.getElementById(“e1”).style;
jQuery(“#e2”).css(e1_style);

does work on Chrome and Firefox (but not ie11).

It’s not a recommended way to change the style of an element, but it hints at how JavaScript and jQuery can have deeper communication than JavaScript with itself. It also reminds of the potential differences from browser to browser.

I’ll be talking more about JavaScript and jQuery in future posts:)

Source:

w3schools

Pollock, John. jQuery: A Beginner’s Guide. Toronto: McGraw-Hill, 2014.

Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.

Web design: jQuery w/ regex


The tutor experiments with jQuery and regex.

Imagine you have a web page: somewhere on it, you believe, is the word wine. You now realize that the promoter wants wine to “pop”: she believes that the prospective audience will pay much more attention, if they notice it. How will they do so, she wonders, if the word is just buried amidst other text?

jQuery to the rescue: it can find the paragraph with wine in it, mark up the word, and re-insert it.

Imagine the paragraph containing wine runs thus:

The audience will, no doubt, be enraptured by the Closet Shakespeare Players as they enact “Julius Caesar”. Most will look forward, almost as much, to the wine afterwards. For serious drama fans the evening is not to be missed…call — — —- to reserve or else text _______.

The code to achieve this effect I’ll be talking more about in future posts:)

Source:

Pollock, John. jQuery: A Beginner’s Guide. Toronto: McGraw-Hill, 2014.

w3schools

Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.

Web design: jQuery selectors: eq(n)


jQuery, famously, offers selectors that a programmer can use to access virtually any element on the page. This post gives an example of the eq(n) selector.

When you click the demo button below, the third H will change. The code:

$(“thisclass:eq(2)”).css(“attribute”,”new_value”)

:eq(2) means the third element, since with computer science, the count starts at 0.

H H H H

I’ll be giving more examples of jQuery selectors in future posts:)

Source:

Pollock, John. jQuery: A Beginner’s Guide. Toronto: McGraw-Hill, 2014.

Jack of Oracle Tutoring by Jack and Diane, Campbell River, BC.