Using JavaScript to override a specifically declared CSS style

Question

Using JavaScript to override a specifically declared CSS style

In the process of working with a database, I come across HTML that includes "spans" colored in different shades. An example would be:

<div id="RelevantDiv">the industry's standard <span style="background-color: red">dummy text ever since the 1500s, when an unknown printer took a galley</span> of type and scrambled it to make a type specimen book. It has survived not only five.</div>

While I want to maintain this coloring, I also aim to create a JavaScript function that can toggle the background color on or off. I attempted the following approach:

function HLtoggle()
{
var element = document.getElementById('RelevantDiv');
element.style.background = '#FFFFFF';
}

Unfortunately, this method doesn't work as the spans are obviously overriding the styling.

javascript html css

Answer 1

Answer №1

The style for the background-color is set on the span element, while in your JavaScript code you are targeting the parent div.

To fix this issue, you can try the following:

var element = document.querySelectorAll('#RelevantDiv > span')[0];
element.style['background-color'] = '#FFFFFF';

Alternatively, I recommend giving a class name to your highlighted span and selecting it by that class instead of by the tag name.

Answer 2

The style for the background-color is set on the span element, while in your JavaScript code you are targeting the parent div.

To fix this issue, you can try the following:

var element = document.querySelectorAll('#RelevantDiv > span')[0];
element.style['background-color'] = '#FFFFFF';

Alternatively, I recommend giving a class name to your highlighted span and selecting it by that class instead of by the tag name.

Answer 3

Answer №2

If you want to change the color of a span element, you can achieve this by using the following code snippet:

var targetElement = document.getElementById('RelevantSpan');
targetElement.style.background = '#FFFFFF';

Make sure to assign an id to the span element in order to specifically target it, like so:

<span id="RelevantSpan" style="background-color: red">

The code you provided for wrapping it up in a function is correct, but don't forget to call that function using an appropriate event handler if you want it to trigger at certain times.

Check out this jsfiddle example demonstrating how to call the function when you mouse over the span:

https://jsfiddle.net/oLfyx0h5/4/

Answer 4

If you want to change the color of a span element, you can achieve this by using the following code snippet:

var targetElement = document.getElementById('RelevantSpan');
targetElement.style.background = '#FFFFFF';

Make sure to assign an id to the span element in order to specifically target it, like so:

<span id="RelevantSpan" style="background-color: red">

The code you provided for wrapping it up in a function is correct, but don't forget to call that function using an appropriate event handler if you want it to trigger at certain times.

Check out this jsfiddle example demonstrating how to call the function when you mouse over the span:

https://jsfiddle.net/oLfyx0h5/4/

Answer 5

Answer №3

Instead of selecting the span, you're currently pointing at the div which is why the css isn't being overridden. Give this a try:

<div id="RelevantDiv">the standard in the industry <span id='another_span_id' style="background-color: blue">...

Update the function like so:

function changeColor() {
    var newElement = document.getElementById('another_span_id');
    newElement.style.backgroundColor = '#FFFF00';
}
changeColor()

Answer 6

Instead of selecting the span, you're currently pointing at the div which is why the css isn't being overridden. Give this a try:

<div id="RelevantDiv">the standard in the industry <span id='another_span_id' style="background-color: blue">...

Update the function like so:

function changeColor() {
    var newElement = document.getElementById('another_span_id');
    newElement.style.backgroundColor = '#FFFF00';
}
changeColor()

Using JavaScript to override a specifically declared CSS style

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to get both the id and name of a selected item in Angular?

Pairing Symfony2 with the power of jQuery AJAX

What could be the reason behind Google and Bing's mobile-friendly tests inaccurately flagging my site as non-mobile friendly?

Substituting characters, backslashes, and double quotes may not function properly

Comparing Redux with passing state down to components as props from the top level of the application

Navigation bar at the bottom using Twitter Bootstrap 3 that includes a combination of full-width and regular containers

Having trouble reaching the unidentified function

Having trouble with properly writing to multidimensional arrays?

What is the accurate way to determine the total number of minutes elapsed from a specific point in time?

Module specifier "vue" could not be resolved due to an uncaught TypeError. Remember that relative module specifiers must always begin with "./", "../" or "/"

Encountering an issue of THREE.EventDispatcher being undefined while trying to create a THREE.OrbitControls instance using THREE.js, THREE.OrbitControls, and TypeScript

Is the eval() function initially used to directly translate the evaluated string?

The modal feature is malfunctioning on a dynamic Flask website across all web browsers

Accordion - Conceal Previously Revealed Items

Having difficulty navigating to a different page in Angular 4

Store the link in a variable and retrieve its content into another variable

I am looking to retrieve the values entered in a textbox from an HTML document and then post them using a JSON file in Node.js when the submit button is

The issue with the Angular custom checkbox directive arises when using it within an ng-repeat

Issues with closures in JavaScript

The texture of the dodecahedron is nowhere to be found