Develop Reference

Multiple pre-defined styles or dynamically change inline style?

I am working on a custom element for playing cards. I use SVG images as the background and I'd like them to change the background image whenever the suit or rank attributes are changed.
As far as I know there are two ways to do so - one is to use the "attributeChangedCallback" method:
static get observedAttributes() {return ["suit", "rank"];}
attributeChangedCallback(name, oldValue, newValue) {
this.style.backgroundImage = `url(...)`;
}
and the other is to have a lot of CSS attribute selectors:
:host([suit="clubs"][rank="4"]) {
background-image: url(...);
}
:host([suit="clubs"][rank="5"]) {
background-image: url(...);
}
...
They both work but the JS way adds inline styling which I'd like to prevent and the CSS way is very big.
Are there any huge performance differences I need to consider?

There should not be huge performance differences, or only if you have hundreds or thousands of custom elements in the same page.
In the latter case you should test both solutions in operational conditions, then choose the better.
If it's not the case, it will depends on how your project is managed: is it the same team the maintains the CSS and the JS files or not.

Get the document's background color

Most web browsers, by default, render pages as having a white background. However, this is to some extent user customizable, and some browsers are different. So, I want to find a way, either through CSS or JavaScript, to find out the background color of the page. The documentation on Mozilla's website suggests that document.bgColor can be used, and that its default value is white. It also suggests to not use it, since it's deprecated. But the docs seem to be in conflict with observed behavior: document.bgColor is an empty string if the page has no CSS to change it. The alternatives suggested don't work either: everything I tried gives me either an empty string or "transparent", which is clearly wrong: I can not see the desktop beneath my browser, hence it is not transparent. (Incidentally, IE11 actually behaves like Mozilla's documentation says that Firefox does. Go figure.)
I want to create an html list element (<ul>) whose background color matches the background color of the document. Is this possible? (I suppose you might be tempted to ask: if I want it to match the background, isn't "transparent" what I want? No. I want it to cover up some other element. Why? Because I'm making one of those auto-suggest thingies.)
Edit: 2 people have wisely suggested that I add an example so it becomes clear what on earth I'm talking about. Based on the answers I've been receiving, these 2 people are absolutely right. I've added a link to a fiddle in the comments of one of the answers, and now I'm adding it here:
https://jsfiddle.net/ftgu97fj/5/

You could use CSS2 system colors - note that these are deprecated in CSS3 and appearance property is advised to use instead.
ul { background-color: Background; } /* this should be desktop background */
ul { background-color: Window; } /* this is browser background */
However, after 5+ years, the standards turned 180 degrees: the appearance was abandoned (except for none value) and system colors are back with different names, see Michael Alan's answer here.

EDIT: Jan Turoň has found a method of doing this using CSS2 System Colors; Please defer to his answer. Note that the system colors are deprecated and that window is the default background color.
Based on the answer in this post regarding background color of highlighted text, it seems that this is likely not possible; the relevant question is also a browser-specific choice of a very similar nature:
Kaiido:
I would say that you can't.
Both getComputedStyle(yourElement, '::selection').backgroundColor and getComputedStyle(yourElement, '::-moz-selection').backgroundColor will return transparent as default value and browser won't override os's default.
(Worth to be mentioned that if you set it to transparent, default os' value will be overriden).
I don't think browsers have access to os default preferences, and if they do, they probably won't let any website access it it so easily.
This question suggests using a canvas element to sample the pixel color, but this unfortunately does not seem to work; in Chrome, it will return 0,0,0,0 for the color of an unset pixel. It gives a potential solution using chrome.tabs, but this is only available to chrome extensions.
The only possibility I can think of would be to use something like HTML2Canvas to "screenshot" the page and sample an empty pixel there, but there is no guarantee this library will operate properly for an unset background.

Nowadays, with access to the system colours and other user preferences, we can simply do this:
ul { background-color: Canvas }
See: CSS Color Module § System Colors

If <ul> element is a direct descendant of <body> element you can use css inherit keyword
ul {
background-color: inherit;
}

Since comments are getting way too long on OPs post, here's what I'd suggest you try:
window.getComputedStyle(document.body)['backgroundColor'])
The usecase of your autosuggest displaying correctly on pages where no background-color has been set (such as empty page) should be covered by setting white as the default background color for your ul. It becomes alot more problematic if you want to take possible background-images into account as well.
Please also be aware that html can have a background-color as well, and body may be limited in size to not cover the whole viewport. See this pen:
http://codepen.io/connexo/pen/jrAxAZ
This also illustrates that your expectation to see your desktop behind your browser if the body were truly tranparent is wrong.

This will definitely solve the problem! check how the js function works
function getBackground(jqueryElement) {
// Is current element's background color set?
var color = jqueryElement.css("background-color");
if (color !== 'rgba(0, 0, 0, 0)') {
// if so then return that color
return color;
}
// if not: are you at the body element?
if (jqueryElement.is("body")) {
// return known 'false' value
return false;
} else {
// call getBackground with parent item
return getBackground(jqueryElement.parent());
}
}
$(function() {
alert(getBackground($("#target")));
document.getElementById("ul").style.backgroundColor = getBackground($("#target"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul id= "ul" style="background-color: red">
<p id="target">I'd like to know that the background-color here is red</p>
</ul>
i kept the prompt for your better understanding

Use jQuery to get css properties of a class/id that that doesn't exist in the page

As it said in the title. I want this javascript...
$("#mrNotAppearing").css("background-color");
to return "red" based on this css...
#mrNotAppearing {
background-color: red;
}
given that there are no elements in the document that actually have the id mrNotAppearing
I'm using media query checks with jQuery to get window widths as seen here and I thought it might be nice to use some "dummy" css that definitely won't get in the way of anything.
I'm also open to other suggestions that achieve the same result.
Plan B, I'll just go with actual css or add some dummy property to body?
Updating for clarity:
It can be difficult to sync javascript that requires particular window widths with media query widths in the css, which can cause layout problems.
Instead, you can query the status of the css itself. As so:
body {
background-color: blue;
}
#media (min-width: 42em) {
body {
background-color: red;
}
}
Then, in the javascript:
if($(body).css("background-color")==="red"){
// we know down to the pixel that it's safe to trigger the javascript
// because the media query went off.
}
All I'm trying to do is add a dummy entry in the css that will be used solely for triggering the javascript. I could use an existing property--and may have to--but I'd like to make it explicit what I'm doing. Or I'm at least toying with the idea.
I apologize for the confusion. I was going for brevity.
P.S. the whole point of the question is to use a style that will 100% not be appearing in the document. And will never change, even if the layout does.

EDIT: Ha, okay, final answer. em does indeed return as px. So...
I'm going to answer my own question because I'm pretty sure it isn't making sense to anyone. Also, I don't know if this is a good idea, but it seems to work for my purposes. So, my solution:
Style the <style> tag. It's in the DOM, it's not structural, and jQuery can get css properties from it. Like so...
style {
width: 672px;
}
and then...
$("style").css("width");
will return 672px
I'm probably over-thinking this. And still probably not making sense. And I have no idea if this works on any browser but Chrome or if it's a terrible idea for some reason, but I think it's kind of appealing, semantically.
Any other thoughts?

You have access to all css rules through document.styleSheets, there is no need to apply to an element.
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet
Here is another answer on how to get the style based on a class name:
How do you read CSS rule values with JavaScript?
EDIT
Although, it would be a lot easier to render the element off canvas for a brief moment:
var $dummy = $('<div>').addClass('class1 class2 class3').css({position: fixed, left: 100%}).appendTo('body');
// collect all info you need here;
$dummy.remove();

JavaScript Cursor Change (and change back again)

I have this page that does some funky database stuff that takes a couple seconds to process, and in the meantime I'd like to set a "wait" cursor so the user doesn't flip out and keep clicking the button. I've looked at the
document.body.style.cursor = "wait"
thing, the problem with this is that it only works when the mouse is over the body of the page (i.e. still shows normal pointer if it's over a button). How can I set it so that no matter where the mouse is on the page, it shows a wait icon?
A second part to this question is, once it's done it's thing, how do I set it back? If I set it back to "default", this seems to override any "hover" cursor changes I had set in my CSS (so it no longer becomes a hand when over a specified object, etc.).
EDIT: the first answer works nicely, except in IE it doesn't refresh the cursor (so you notice the change of cursor type) until you actually move the cursor. Any fixes?

What I suggest is two things:
a) Better write a CSS like
body.waiting * { cursor: wait; }
b) Use the JS to handle the body class
/* when you need to wait */
document.body.className = 'waiting';
/* to remove the wait state */
document.body.className = ''; // could be empty or whatever you want
You might want to add the class instead of replace the whole class attribute, what I suggest is to use something like jQuery for that.
EDIT 2019: don't use jQuery for just this, use classList

The styling should be handled via CSS, as stated by W3C.com:
CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. ... The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation.
As suggested by Tom Rogerro, add a line to your CSS file:
body.waiting * { cursor: wait; }
However, your script should not overwrite the entire list of class names. Tom suggested setting the class names via jQuery, but jQuery is unnecessary in this case. Simple Javascript can do this.
To add a class name 'waiting' to the document body:
document.body.classList.add('waiting');
To remove a class name 'waiting' from the document body:
document.body.classList.remove('waiting');

For your first problem, try using cursor: wait !important;.
For your second problem, the default cursor for elements is cursor: auto;, not cursor: default; or cursor: inherit;.

If you are happy using JQuery then a quick way to solve this would be to use:
$('*').css('cursor','wait')
I don't know how elegant this is but it has been working for me,

Not an answer to the question, but a way of achieving what is wanted.
Make a div (see class below) visible when you are loading.
ensures no element is accessible and dimmed display indicates this.
you can add an animated gif to indicate something is going on instead of the cursor.
.loading{
position:fixed;
height:100%;
width:100%;
left:0;
top:0;
cursor:wait;
background:#000;
opacity:.5;
z-index:999}

Any elements that don't inherit the cursor by default (such as buttons) will need to set the cursor to inherit:
someButton.style.cursor = 'inherit';
To go back to the default for an element (and not break things like :hover with a forced cursor), set it to an empty string:
document.body.style.cursor = '';

I tried everything but finally this jquery worked, especially if you want wait cursor over all elements including buttons and links.
define at the top of angular .ts file
declare var $: any;
and then where ever you want wait cursor:
$('*').css('cursor','wait');
and remove wait:
$('*').css('cursor','auto');

To fully replace the CSS toggling behaviour, we can simply use this inline:
<img
src=https://cdn.sstatic.net/Img/unified/sprites.svg
onmouseover="this.style.cursor = 'crosshair'"
>

want to change color at multiple places in one go !

My problem is I have couple of divs in my page. All have header of similar color. Now if I have to change the color(for example background color) of all divs, I have to make changes as many divs I have. Is it not possible to just change or say write the color code at one place (like in a variable) and the then use that variable as color value in the embedded styles to all those divs. Something like javascript entities.

If you need variables in CSS, you might want to look at CSS pre-compilers (is this the correct term?), such as Sass, which does this Server-side and eases the pains for having many different color repeated across multiple rulesets.
Otherwise, when developing, try splitting your CSS files into individual components, such as typography.css, color.css etc. to help better organise them. You'll still want to combine them after development is complete for better performance, but doing this does help keep things neater and tidier.
Lastly, you can always define large rules like this:
#header, #footer, #nav, #sidebar {
color: orange; /* I like orange! */
}
Which would reduce redundancy somewhat. Using Javascript for styling and presentation should only be kept as a last resort; there are always tools available to keep your CSS tidy; you only need to use them.

u can write some css and jquery to achive this
.color1
{
color:red;
background-color:green;
}
.color2
{
color:blue;
background-color:orange;
}
now on some event u can change classes. for example intitially u have
<div class="header color1">SOME TEXT HERE</div>
<div class="header color1">another header</div>
u can change this with jquery or even with javascript :)
$("#somebutton").live("click", function(){
$(".header").removeClass('color1');
$(".header").addClass('color2');
});
this will change color of both headers at click of button with id somebutton

How about setting the same class on all divs and set all common colors in there? That way you'd only have to change the color for that class.

I would suggest using jQuery or another javascript library, to do this.
Assign a class to the divs you wish to alter, and then use the following code (when giving them a clas of 'header-div')
$('.header-div').('background-color','#FF0000');
this will change ALL elements with the class of 'header-div'

Jquery solution
define all the divs with a specific class like
<div class="changeable"></div>
Then use jquery to change the background
$(".change").click(function() {
$(".changeable").css("background","#000");
});