Develop Reference

How to change background color of a page while avoiding iframes/images/videos using js/css?

I am new to CSS/JS and I am creating an accessibility chrome extension and I need to change the background color of the page. The problem I encounter is when changing the color of pages that have videos like twitch and youtube.
function changeBKColorPredefined(background, color) {
var tags = document.querySelectorAll("*");
for (let i = 0; i < tags.length; i++) {
tags[i].style.backgroundColor = background;
tags[i].style.color = color;
}
}
This code clearly changes everything there is on the page, but I don't know how to avoid changing the background color of certain tags without having to specifying them which would of course become a really hard to maintain code.
Example output of the code showed before:
I have also tried to only change the body color by using document.body.style.backgroundColor but it does not change the color of the whole page.
Thank you for any help.
Edit: an example of what I mean can be found in this extension: https://chrome.google.com/webstore/detail/a%20-fontsize-changer/ckihgechpahhpompcinglebkgcdgpkil

Use css custom properties also known as CSS Variables. This way you can set in your CSS property value as background, and then change only said value.
Simple example would be:
:root {
/**
* This will be your default value. In this example - black.
*/
--changing-background: #000;
}
/**
* In places where you want to change backround set it as background color
*/
.classes-with-changing-background {
background-color: var(--changing-background);
}
Then in JS you do:
// This is your JS. In my example we change property value to white
document.documentElement.style.setProperty('--changing-background', '#fff');
I took JS from this answer

Impossible to get border's value [duplicate]

I run the following code in the Firebug console.
$('img').css('border', 'solid 2px red').css('border');
The red image borders appear, but it returns an empty string, why is this?
It works fine in Chrome and Safari developer tools.
Update: The jQuery docs say that shorthand properties are not supported when getting CSS values. However I have also tried the following with no luck in Firefox (All work in Chrome and Safari)
$('img').css('border-style', 'solid').css('border-style');
$('img').css('borderStyle', 'solid').css('borderStyle');
$('img').css('border', 'solid 2px green').css('borderStyle');

Quoting .css docs.
Shorthand CSS properties (e.g. margin, background, border) are not supported. For example, if you want to retrieve the rendered margin, use: $(elem).css('marginTop') and $(elem).css('marginRight'), and so on.
For the case of border, you need to use the border-width, border-style and border-color related properties.
e.g. border-color:
$('img').css('border-top-color', 'red').css('borderTopColor');
$('img').css('border-right-color', 'red').css('borderRightColor');
$('img').css('border-bottom-color', 'red').css('borderBottomColor');
$('img').css('border-left-color', 'red').css('borderLeftColor');

Try this:
var border = $('img').css('border', '2px solid red')[0].style.border;
FIDDLE

Supported properties in firefox:
'border-top-color'
'border-right-color'
'border-bottom-color'
'border-left-color'
'border-top-width'
'border-right-width'
'border-bottom-width'
'border-left-width'
'border-top-style'
'border-right-style'
'border-bottom-style'
'border-left-style'
Are the supported longhands :) Cheers! Enjoy!!!
You can still use shorthand to set border in most cases.
If you are sure they are the same do something like
var borderString = $('img').css('border-top-width') + " "
+ $('img').css('border-top-style') + " "
+ $('img').css('border-top-color');
to get the string like "2px solid rgb(255,255,255)'

Perhaps you are trying to use multiple properties
use the following syntax
$('img').css({'border':'solid 2px red','color':'green'})
the shorthand property not supported in Jquery.

var objImage = $('img').css('border', 'solid 2px red');
objImage.css('border-top-color');
objImage.css('border-top-width');
objImage.css('border-top-style');
Not just for top, it is also applicable for right, left, and bottom.
This is also a non-working code :
objImage.css('border-style');
Since border, margin, padding properties of CSS is seperately editable. If border-top is different than border-left, browser may be confused which it must return when you just asked border.

Konami code changing every color

Okay I want to change my websites colors on the press of a button. So i have this code:
$( window ).konami({
code : [38,38], // up up
cheat: function() {
$('*').filter(function() {
var match = 'rgb(255, 165, 0)'; // match background-color: black
/*
true = keep this element in our wrapped set
false = remove this element from our wrapped set
*/
return ( $(this).css('color') == match );
}).css('color', 'purple'); // change background color of all black spans
}
});
Now the problem is I want to add bunch of other attributes like background-color, border-color and even active and hover color - though these two might be problematic with this code snippet I think.
Any help adding named attributes to the fray is welcomed - as I'm not an javascript expert by no means.
Also bonus question my webpage is on AngularJS and when I used this konami code, it seems to only work on colors that are currently on display. So on different pages I would have to enter the keys again. Any simple workaround or I gotta deal with it?

Apply CSS to disabled button

I want to view disabled button as:
The one marked with red is a disabled button and the green one is enabled.
I am trying to apply CSS to do the same as follows:
$(document).ready(function () {
$('#btnSearch').attr("disabled", true);
$("#btnSearch").css({ 'background': "#grey" });
});
But its not showing up as mentioned in the image.
Its looking for me like this:
Which CSS attribute do I need to use for disabled buttons as above (marked in red)?
JSFIDDLE:
http://jsfiddle.net/54qJx/

Try out with prop()
$(document).ready(function () {
$('#btnSearch').prop("disabled", true);
$("#btnSearch").css({ 'background': "gray" });
});
#BearGrylls
Check this updated fiddle demo, its working as per your requirement.

css function should be like this to work.
$(document).ready(function () {
$('#btnSearch').prop("disabled", true);
$("#btnSearch").css('background-color','grey');
});
You can also use attr, but I prefer prop
$(document).ready(function () {
$('#btnSearch').attr("disabled", true);
$("#btnSearch").css('background-color','#ccc');
});

you can simply disable a button by this
$('#btnSearch').prop('disabled', true);
also change the background color with
$('#btnSearch').css('background-color', 'gray');
check the .css() API for usage.
btw when using color name like gray, you don't need to put a '#' ahead of the name, that's why your setting of background color doesn't work.

You can use opacity css for graying out disabled button :
$('#btnSearch').prop('disabled',true).css('opacity','0.5');
Working Demo

You can use the CSS3 :disabled selector, if you want to style it with CSS instead of Javascript:
#btnSearch:disabled {
background-color: grey !important;
}
edit:
Your problem is, that your button is styled with an inline style-tag. It's generally a bad idea to use these, as it makes maintaining larger pages a nightmare. Read this article for more information: Best Practices: Avoid Inline Styles for CSS.
See this fiddle for an example of how to do it anyways. What I'm doing here is using this trick to override the inline style properties.

Setting the background color won't grey won't make the button look like the two you have circled, as it looks like there is more CSS at work then simply setting the background to grey.
you can use
$("#btnSearch").css({ "element": "new value" });
But you might need to call it 4 or 5 times to get the desired effect with different elements.
Otherwise you can use
$("#btnSearch").addClass("disabled")
where disabled is a CSS class you've created with the correct styling (background grey, text colour darker etc). At a guess the two red circled buttons have had a class added to them to make them look disabled, so you can just add that class to the button you want to disable.

if you want to use "#" with color. than you must use color HEX value not the name

Error in line $("#btnSearch").css({ 'background': "#gray" });
Try this
Your Button
<button id="btnSearch" onclick="TeacherData_OnSearch()" style="background-color: #249FDA; color: white; height: 22px; width: 45px; border-radius: 4px;">Search</button>
Script
$(document).ready(function () {
$('#btnSearch').attr("disabled", true);
$('#btnSearch').css("background-color", '');
$("#btnSearch").css({
'background-color': "grey"
});
})
DEMO

set a css class
.bg1 {background:#ddd}
then add it on button
$(document).ready(function () {
$('#btnSearch').attr("disabled", true);
$("#btnSearch").addClass("bg1");
});

JavaScript cssText not working as expected in Firefox and Opera browsers

Please consider the code snippet below:
<!DOCTYPE html>
<html>
<body>
<div id="mydiv">Sample Text</div>
<script type="text/javascript">
var md=document.getElementById("mydiv");
md.style.cssText="background-color:yellow !important;color:red;font-size:70px;font-weight:bold;";
setTimeout(function(){
md.style.backgroundColor="blue";
md.innerHTML+="<br/>Updated!";
},2000);
</script>
</body>
</html>
Explanation: I am trying out the cssText browser support and noticed that cssText is not working as per my expectation in Firefox, Opera browsers.
The above code defines "background-color:yellow !important" and after 2 seconds the background-color is changed to blue. But since I have specified '!important' in my cssText, I assume the background-color should not get updated. This works in IE, Chrome, Safari. But not in Firefox, Opera.
Can someone please suggest.
EDIT: I want to specify the !important rule for a css property and restrict further changes to it via javascript. I would like to achieve this using JavaScript i.e. specifying !important via JavaScript. Any help on this would be appreciated.

Stumbled across this question while googling for something else.
The first thing to understand, is that cssText doesn't create another style: It is merely a shorthand that lets you assign multiple styles at once. The following are roughly identical:
element.style.cssText = "background-color:yellow;color:red;";
element.style.backgroundColor = "yellow";
element.style.color = "red";
The only real thing to note, is that I believe that assigning to cssText will overwrite any existing element styles. Eg, the following will result in a style that is exactly equal to color:red; and not equal to background-color:yellow;color:red;. cssText effectively removes any existing element styles before applying the ones specified:
element.style.backgroundColor = "yellow";
element.style.cssText = "color:red;";
The second thing to realize, is that !important doesn't make a style read-only. It only prevents defined styles of higher specificities being used, and only does so as long as it is defined. When you assign the background color value of blue, you are effectively removing !important from the declaration. You'd have to set your background color as background-color:blue !important; in order to keep it.
In short, if something overwrites your background-color:yellow !important; with background-color:blue;, there's nothing you can do about it. Unless you do some other fancy work, like creating a timer interval that every X milliseconds resets the yellow !important style. But then you run into problems of having to keep track of the interval, especially if you may actually want to set the background color to some other value, otherwise it will just get overwritten on you!
var element = ...;
setInterval(1000, function(){
if (element.style.backgroundColor != "yellow !important") {
element.style.backgroundColor = "yellow !important";
}
});
The one thing I can think of, is if these styles are set in stone, you could just make them actual rules instead of inline element styles. You can keep the !important tag if you make it a rule:
.bg-yellow {
background-color: yellow !important;
}
element.className = "bg-yellow";

Here is your JS modified code. I've checked in FF 27 and it is working.
var md=document.getElementById("mydiv");
md.style.cssText="background-color:yellow !important;color:red;font-size:70px;font-weight:bold;";
setTimeout(function(){
md.style.setProperty="background-Color:blue"; //modified this line
md.innerHTML+="<br/>Updated!";
},2000);
Here is the Working Demo for you.
http://jsbin.com/kifozeka/2/edit