Set the height of the document body to be "100%" using the style property

I'm trying to figure out the html tag in order to change the background image, but I keep getting an error that says: "TypeError: document.html is undefined."

Here's the code I've been using:

function init(){
        document.html.style.background ="url('175541_DSC_0291.JPG') no-repeat center center"; 
    }

    window.onload = function(){
        init();
    }

I searched for similar questions online and found something about using the body tag instead of HTML. When I changed it to body, it worked perfectly.

On top of that, I can easily set the HTML background to what I want using my CSS file, but I really want to achieve this with JavaScript. Any thoughts on why this isn't working?

Thanks in advance, George

javascripthtmlcss

Answer №1

For obtaining the HTML element, you can utilize:

window.document.documentElement

Answer №2

html is not a direct attribute of the document object. Alternative methods must be utilized to access it.

There exist numerous options available.

For instance:

document.documentElement
document.body.parentNode
document.getElementsByTagName("html")[0]
document.querySelector("html")

Answer №3

You can access the <html> element using the document.documentElement property. To customize the background, simply update it with this code:

document.documentElement.style.background = '';

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

The request you are trying to send to the controller resulted in a 404 error

When the ParseFile Button is clicked, a script calls a method named parseFile inside the batch_processor controller. The script looks like this: <script> $(document).ready(function() { $('#xmlfile').multi(); }); let parseFile = (updat ...

javascriptphpmodel-view-controller

What is the best way to arrange the keys of a JavaScript object in a customized

I am struggling to find a way to custom sort a JavaScript object properly. For example, I have the following object: var test = { 'yellow': [], 'green': [], 'red': [], 'blue': [] } And an array with values ...

javascriptsortinghandlebars.jsjavascript-objects

Resource file for locating the mappings

As a beginner in sourcemapping, I have been tasked with saving the sourcemap in an external file. However, up to this point, I have only been able to concatenate the sourcemap to the minified .js file. What changes should I make to my approach? Am I miss ...

javascriptnpmgulp

What is the best way to sequentially invoke an asynchronous function within an Observable method?

Presently, I have the following method: public classMethod( payload: Payload, ): Observable<Result> { const { targetProp } = payload; let target; return this.secondClass.secondClassMethod({ targetProp }).pipe( delayWhen(() ...

javascriptnode.jsasync-awaitrxjs

Query to retrieve the most recent message from all users and a specific user resulting in an empty array

My goal is to retrieve all messages exchanged between User A and any other user. This is my schema structure: const MostRecentMessageSchema = new Schema({ to: { type: mongoose.Schema.Types.ObjectId, ref: "user" }, from: { type: mongoose ...

javascriptmongodbmongoose

Align content to the center column with a combination of right-alignment and left-al

This question poses an interesting challenge, but I will do my best to articulate it: I have a central column of content and I am looking to incorporate columns on the left and right of it that seamlessly "hug" the middle column. How can I consistently ce ...

htmlcss

the process of triggering animation to start automatically when a button is clicked in Web Development

I'm looking to create a React component that triggers an animation when clicked. I have a few options in mind: If the props are changed in the middle of the animation, it should restart the animation. The props can be changed by clicking a button on ...

javascripthtmlreactjstypescriptcss-animations

The HTML code is failing to apply the style to all rows except for the first one in the sql query result

When retrieving all the rows from a SQL database with a query and using a loop to iterate through them, I encountered an issue where only the first row was receiving the specified CSS style. The remaining rows were not applying the style as expected. < ...

phphtmlcss

Having trouble locating the withArgs() method of the Spy class when using Jasmine and TypeScript

As per the Jasmine documentation, there is a method called withArgs() in the Spy object. spyOn(someObj, 'func').withArgs(1, 2, 3).and.returnValue(42); In the TypeScript-adapted version, I am unable to locate this method. My project was initiali ...

javascriptangulartypescriptjasmine

Show concealed elements above everything else

I've encountered an issue with my custom dropdown list as it displaces other elements when it appears. I want it to overlay on top of everything else, similar to the default select behavior. Despite trying to set position: relative; and z-index:100;, ...

javascriptjqueryhtmlcss

Encountering the issue of receiving an error message that says "emitted value instead of an instance of error while compiling template" when trying to set

Trying to set up a Vue table with the help of a Vue table plugin in my application through node module is proving to be challenging. An error keeps popping up when I try to use all Vue table components. I installed all Vue table plugins using npm and impor ...

javascriptvue.jsvuejs2

Tips for navigating between modal data in ng-repeat with the use of angular ui modals

I am new to Angular JS and I have a question related to populating data using ng-repeat from a local JSON file. When the data is clicked, it should display more detailed information about the selected company. Now, I want to implement the functionality for ...

javascripthtmlangularjstwitter-bootstrap

Retrieve the second offspring of a jQuery selection

I have searched extensively for a solution to this question, but haven't come across anything helpful. Here is the code snippet I am struggling with: $("table tbody tr").hover( function() { var secondCell = $(this).children[1].textContent; ...

jqueryhtmlthiselement

Pictures appearing stretched due to width or height percentages being used

I'm dealing with a set of 15 consecutively displayed images, each following the same format: <div class="foo"> <p> <a href=""><img src="img.jpg"></a> </p> <p> <a href=""><im ...

css

Tips for adjusting column spacing in HighCharts

Looking for some advice on how to make a chart container scrollable and properly space the labels and bars within a parent container with fixed width and height. The goal is to ensure all labels are visible and bars are well spaced. Any suggestions or tips ...

jqueryhtmlcsshighcharts

Having difficulty automatically adjusting the width of HTML columns according to their content

I have a HTML table that I want to automatically set the width of the table columns, adjusting based on the content within. Despite setting the width to auto, as shown in the image below, the content in the ID column does not stay confined to a single line ...

htmlcssbootstrap-4

Enhance your Android desktop applications with cutting-edge CSS frameworks

When developing normal web applications, many of us turn to CSS frameworks like Bootstrap. I have also come across some CSS frameworks tailored for mobile apps, such as PhoneGap. However, I am curious if there are any CSS frameworks specifically designed f ...

androidcssframeworks

Implementing Click function to selectively display a single object within a JSON array

In my JQUERY code, I've created a .each loop that iterates through data in a JSON file and populates the content into small thumbnails. When you click on a thumbnail, it should display the corresponding content on the post page. The issue I'm fa ...

jqueryhtmljsonajax

Using Ajax to return a Post type in c# mvc 4 instead of a value

Hey there, I seem to be encountering an issue that I could use some help with. $.ajax({ type: "POST", url: "/controller/CreateList", contentType: "application/json; charset=utf-8", traditional: true, ...

c#javascriptjqueryajaxasp.net-mvc-4

Issue with PHP functionality not functioning properly

I've been working on implementing an AJAX Form to allow users to upload their profile picture on my website. However, I've encountered some difficulties with the process. I have created a PHP page where the form is supposed to be posted using AJA ...

javascriptphpjqueryajaxforms