Importance of body background color attribute

My CSS sets the body to a blue color, but my JavaScript changes the body color every second. It was working fine until I added a global CSS file. Unfortunately, I can't remove this CSS file because it contains many important rules that I need.

I'm looking for a way to keep all the CSS rules from the global stylesheet, while still allowing my JavaScript script to change the background color of the body without interference.

Here's a screenshot to show that the body background color is changing with the script, even though it may not be visible:

If anyone could provide a solution to include the external global CSS file and still allow my script to dynamically change the background color, it would be greatly appreciated.

P.S.: I'm new to coding and still learning!

EDIT:

Here's the code I'm currently using: http://fiddle.jshell.net/dfywom6a/

Please help!

javascriptjqueryhtmlcss

Answer №1

Consider utilizing 

document.body.style.background = color;
as a more effective alternative to document.bgColor = color;. This approach will allow you to override any global CSS styles applied to the body element.

For further reference, check out this helpful demonstration: http://jsfiddle.net/ceueqetn/

Answer №2

The bgColor attribute has been marked as deprecated, suggesting that the CSS rule may be overriding any color specified in this attribute.

Instead of modifying the bgColor using JavaScript, it is recommended to adjust the CSS settings like so:

var body = document.getElementsByTagName('body')[0];
body.style.setProperty('background-color', 'red');

Click here to view the updated version of your code.

Answer №3

Make a modification to your code by replacing document.bgColor with document.body.style.background

To see a working example, visit http://fiddle.jshell.net/dfywom6a/42/

function cc() {
    window.setInterval("Farbe()", 500);
}
farbe = 1;

function Farbe() {
    if (farbe == 1) {
        document.body.style.background = "indigo";
        farbe = 2;
    } else if (farbe == 2) {
        document.body.style.background = "red";
        farbe = 3;
    } else if (farfe == 3) {
        document.body.style.background = "orange";
        farbe = 4;
    } else if (farbe == 4) {
        document.body.style.background = "blue";
        farbe = 1;
    }
}

Answer №4

Consider using the !important declaration in your color CSS style.

div {
  color: #00f !important;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Managing server JSON objects in Adobe AIR

I am facing an issue with a script that fetches objects from a remote server using an Ajax call. The server sends back objects in JSON format. However, while working on Adobe AIR, I encountered a restriction on utilizing eval() due to security concerns. As ...

javascriptajaxjsonair

The error handler function is missing in Zepto's $.post method

When I was using Zepto instead of jQuery, I noticed that while the $.ajax method has an error handler, other methods like $.post and $.get do not. Do you know why this is the case? Function Signature $.post(url, [data], function(data, status, xhr){ ... }, ...

javascriptjqueryajaxxmlhttprequestzepto

What is the best way to coordinate text and photos within Bootstrap?

Currently, I am working on a bootstrap website that features a slideshow with 3 photos. The jQuery function responsible for this is as follows: $(function () { $.vegas('slideshow', { backgrounds: [{ src: 'img/ph1.jpg ...

javascriptjqueryhtmltwitter-bootstrap

How the logo's placement shifts while zooming out (using CSS and Angular 4+)

I am facing an issue with my navbar that includes a logo (MostafaOmar) which shifts position when zoomed out. If you try zooming to 70%, you will notice the logo's position changes as well. Is there a way to make it stay in place at 100% zoom? Here ...

javascripthtmlcssangularfrontend

What is the best way to display a user's profile picture on my website by pulling it from the database?

I'm currently using this code for my user page, but it only displays their names from the database. userlist.php <?php include "header.php"; include "footer.php"; include "db_conn.php"; ?> <!DOCTYPE html& ...

phphtmlmysql

Create a time of 00:19:59 using JavaScript

I am attempting to display a countdown timer that starts at 20 minutes in the format (00:20:00) using setInterval. Once the countdown is finished, it should display as (00:00:00), but I am having trouble achieving this. <body onload = "onloadFunc();" ...

javascriptsetinterval

Turn off all VuetifyJS transitions

Is there a way to completely turn off all transitions, such as the slide-x-transition or dialog modal scale transition, in VuetifyJS? ...

javascriptvue.jstransitionvuetify.js

Incorporating the use of font color in CSS styles and

I am creating a newsletter template using foundation. Within the table, there are 2 <th> elements containing the content "Reservationnumber" and "23425-FF3234". I have multiple instances of these <th>. I want to apply a colored font to them. Wh ...

htmlcss

Can Python's datetime object be used interchangeably with a JavaScript date object?

Take for instance in python, a date might look like: 2020-06-19T11:32:16.548109Z, is there a method I can utilize to transform this into a javascript Date object? ...

javascriptpythondjango

Updating image properties with JQuery

My challenge involves dealing with an image that includes the following code: <img src="/Modules/Visualiser.php?template=1&text=testing"> The goal is to change the 'template' parameter based on a selection made in a dropdown menu. How ...

jquery

Assistance needed in regards to relative positioning

I am working on a feature where the customer's shopping cart is displayed when they hover over "My Cart." I plan to achieve this effect using CSS, but I have encountered an issue with the size of .cart causing .my-cart to stretch... update The previ ...

csscross-browser

What could be causing Jquery's $.ajax to trigger all status codes even when the call is successful?

Here is a simple Jquery ajax function call I have. function fetchData(){ var jqxhr = $.ajax({ url: "../assets/js/data/users.json", type: "GET", cache: true, dataType: "json", statusC ...

javascriptjqueryajax

Ways to retrieve every span within a string variable that possesses a specific class designation

I'm having trouble listing out all spans with the class "ansspans." There may be one or more span elements with the "ansspans" class, and I need to retrieve them along with their content in order to iterate through them. Can someone explain how to do ...

javascriptjqueryregex

Unable to load more content in JQuery Mobile version 1.11.1 when attempting to click for additional content

My news app features a homepage with headlines displayed, and when a user clicks on the "load more" link, additional headlines are loaded. However, after updating my jquery mobile version from 1.8.3 to 1.11.1, the "load more" link no longer functions prope ...

jqueryajaxjquery-mobile

Executing an xajax/ javascript function simultaneously

Is there a way to simultaneously execute the same function? Here is an example: function convert_points() { show_loading(); xajax_ConvertPoints(); xajax_GetRegularGamingCards(); } When xajax_ConvertPoints is called, there seems to be a mill ...

phpjavascriptfunctionxajax

In TypeScript, the function is failing to retrieve the complete array value

I'm facing an issue with a program that is supposed to piece together all the letters, but it's not functioning correctly. I've tried using the debugger, but it doesn't display any errors. Here's the code snippet: var phrase = [ &a ...

javascripttypescript

PayPal form without encryption

Once upon a time, I recall creating a button in Paypal which provided me with a standard HTML form. However, now everything seems to be encrypted. Is there a way to retrieve an unencrypted format? I need to be able to manually adjust the price using jQuer ...

phphtmlencryptionpaypal

Sending dynamic data through AJAX to a CodeIgniter controller is a common task that allows for seamless

Can anyone help me with retrieving data from a looping form in CodeIgniter? The form works fine, but I'm struggling to fetch the looping data in the controller. Here's my view (form): <form action="#" id="ap_data"> <div class="table-r ...

javascriptajaxcodeigniter-3

Clicking on a new tab causes the page to quickly scroll back to the top (jQuery Tabs

Currently, my website is utilizing jQuery tabs with AJAX functionality. Here is the HTML code: <div id="tabs"> <ul> <li><a id='tab-1' href="/get-1.htm">1</a></li> <li><a id=' ...

jqueryjquery-tabs

How to send the chosen option value from a select tag in Python Flask

My user registration form features a select tag, and I'm trying to assign the value of the selected option to a variable using the code below: registration.html <form method="POST" action="/register"> <div class="form-group"> ...

pythonhtmlflaskflask-wtforms