CIT 261 - Fluency Evidence - CSS3 and JavaScript

Apply an Existing CSS Style

function applyStyle(){
    var hlight = document.querySelector('#highlightThis');
    hlight.setAttribute('class', 'highlight');
This text is highlighted via JavaScript!

Set CSS Variables from JavaScript

function setCssVariables(){
    const h4 = document.querySelectorAll('h4');
    const alignment = ['left','center','right'];
    const ai = Math.floor(Math.random() * 3);
    const fs = (Math.floor((Math.random() * 300)+20)/100) + 'em';
    document.querySelector('#h4Size').innerHTML = "%lth4%gtFont Size: " + fs + 
    document.querySelector('#h4Align').innerHTML = "%lth4%gtText Alignment: " + 
        alignment[ai] + "%lt/h4%gt";
    for (i = 0; i < h4.length; i++) {

Size and alignment of the h4 tag is set via JavaScript!

Change Style on Mouseover

//Create a 'global' list of all bold items
var bold_Tags;
window.onload = js_getBoldTags();
// Collect all <strong> tags
function js_getBoldTags() 
  bold_Tags = document.getElementsByTagName('strong'); 
// iterate all bold tags and change color  
function js_highlight() 
   for (var i=0; i<bold_Tags.length; i++)
    bold_Tags[i].style.color = "green";

// On mouse out highlighted words become black
function js_unHighlight()
  for (var i=0; i<bold_Tags.length; i++) 
       bold_Tags[i].style.color = "black";

[On mouse over here bold words of the following paragraph will be highlighted]


"As learners, you and I are to act and be doers of the word and not simply hearers who are only acted upon. Are you and I agents who act and seek learning by faith, or are we waiting to be taught and acted upon? We are all to be anxiously engaged in asking, seeking, and knocking." Seek Learning by Faith, Address to CES Educators, 2007