When should I control changing the background image using CSS versus Javascript?

Question

This is a more general question regarding a specific problem, but I will give an example of what I mean. There are many things that you can control with CSS that you can also use with Javascript, but is it better to rely on another?

Example: I have four buttons in the navigator that are assigned the "selected" class when the section with which they are associated is in view. So I can either write a CSS instruction for each button (or make Sass for me using mixin)

#home-butt.selected{ background-image: url(images/home-up.png);} #about-butt.selected{ background-image: url(images/about-up.png);} #work-butt.selected{ background-image: url(images/work-up.png);} #contact-butt.selected{ background-image: url(images/contact-up.png);} 

Orrr I can write something in javascript to do the same. (* I gave the images a title attribute that matched the name of the image so that it could from there from there).

 title = $(this).attr('title'); $(this).find('img').css("background-image", "url(" + 'images/' + (title) + '-up.png' + ")"); 

So my question is which is better to use? Is this javascript because it is less lines of code? Or is javascript javascript disabled? Or is it a very situational question when there is not always a right or wrong answer?

Opinions and rebuttals are welcome!

Answer 1

In many cases, when Javascript development does what I try to do much more easily, and in other cases when CSS does it.

“Ultimately, each“ language ”has its own rightful place in website development and can reasonably improve both development and user experience. Find out what use is (I recommend learning experience) and apply it wisely. In my experience, stone rules such as "Never use JS when a CSS solution exists" (rephrased) are rarely in the practical world. "

If you are working with a layout, use CSS if you create the look and use CSS if your animations use CSS3

If you attach event handlers or respond to user input, use JavaScript .

Answer 2

To answer your question "is it better to lean than the other?"

Keep in mind that CSS has a specific purpose. To apply the look to your application. JavaScript, on the other hand, is basically the feel of your application. Always prefers CSS over JavaScript when editing styles.

The only time you ever need to change styles using JavaScript is when you have a dynamic application and you need to change styles based on an unknown variable. Even then, much can be achieved by using CSS.

Also keep in mind that you are using jQuery. think of a jQuery constructor. This is a CSS selector.

With the concept of CSS pseudo-classes introduced, there is very little that you cannot achieve style with CSS.

Answer 3

Usually you want to use CSS because it is much faster than javascript. There will also be users with javascript disabled who are not going to see your extended presentation if it relies on the js function.

Answer 4

The usual answer: Use CSS when you can, because it will work with JavaScript turned off, and also because you don't have to solve problems such as waiting for elements in the DOM before referencing them.

But sometimes it depends. Keep in mind that:

• Depending on the selector or properties you choose, you may have browser compatibility issues.

• If you change the image, as in your example, you can see that it flickers when loading a new image. You can avoid this by using a sprite image or by preloading the images using JavaScript.

Answer 5

As a general rule, I would use CSS for styling and JavaScript just to make the page live.

Thus, the best and most ideal use of JavaScript is to add and remove classes from elements - the classes your CSS depends on.

Answer 6

Downloading the jQuery library to complete this simple task is not required, and you also do not need to rely on javascript to apply background images to your img tags.

If this can be done correctly in CSS and works in all browsers, then this should be done in CSS.

Javascript is designed for more complex or complex tasks requiring interaction or animation that CSS cannot provide for all browsers (due to browser compatibility issues - check caniuse.com)

In your example, if the .selected attribute .selected provided dynamically using javascript for example:

 makeSelected(elm) { document.getElementById(elm).className='selected'; } 

then I will personally personally add the style for .selected in CSS instead of adding the image via javascript.

If you add .selected based on the current page you're on, and not through javascript, I would recommend using CSS.

Answer 7

I prefer CSS over Script for one main reason. Browser compatibility.

There are many times when one Script code or another is incompatible in one browser or another (cough or only IE)

With css, I have not had such problems (touchwood), and also, if there are any problems, CSS will not affect as much as Script, which simply will not allow the other following codes to execute.

Answer 8

Let me give you my opinion.

Personally, I don’t think that a website should have a lot of “tricks” in terms of design. I mean soaring effects, background music (absolute no-no) or other “attractive details”. This all looks good for the first time, but subsequently visitors got tired of these distractions.

Without deviating from the main problem. CSS / JavaScript for styling.

It’s good that they exist hand in hand. The best example for this is the Bootstrap library. Although I have never used it personally, it seems amazing what can be achieved using CSS and JavaScript.

So, we will need to create an impressive website. CSS helps in the main design and makes the site more responsive, we use JavaScript and its derived libraries, such as jQuery for all the more subtle things.