Modify the style of HTML body in JS

Modify the style of HTML body in JS

1. Original Definition

First define in css: body , html width and height are 300px

body, html {
   width: 300px;
   height: 300px;
}

2. JS operation, taking width modification as an example

// Get the body and html node styles (mainly html here, it is not clear how to get it at first)
let bodyStyle = document.body.style
let htmlStyle = document.getElementsByTagName('html')[0].style

// Get the width of the browser. Width can also be set to any value. let width = document.documentElement.clientWidth || document.body.clientWidth

// Reset body width bodyStyle.width = `${width}px`

// Reset html width htmlStyle.width = `${width}px`

// Or other style modifications, such as:
htmlStyle['min-width'] = `${width}px`

3. Effect: Width has been modified

This is the end of this article about how to modify the style of HTML body in JS. For more information about how to modify the style of HTML body in JS, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • HTML plus CSS style to achieve JS food project homepage sample code
  • HTML+CSS+JavaScript to make a girlfriend version of scratch card (you will learn it once you see it)
  • Detailed explanation of the use of HTML canvas and page storage technology in JavaScript
  • JS, CSS and HTML to implement the registration page
  • SpringMVC @RequestBody Date type Json conversion method
  • C# sends a POST request with JSON Body through HttpWebRequest
  • Solve the problem of @RequestBody receiving json object and reporting error 415
  • Let's talk about the relationship between @RequestBody and Json

<<:  How to replace all tags in html text

>>:  Use tomcat to deploy SpringBoot war package in centos environment

Recommend

Mysql 5.7.19 free installation version encountered pitfalls (collection)

1. Download the 64-bit zip file from the official...

Several ways to improve the readability of web pages

1. Use contrasting colours. The contrast here ref...

How to use libudev in Linux to get USB device VID and PID

In this article, we will use the libudev library ...

HTML meta viewport attribute description

What is a Viewport Mobile browsers place web page...

Example of implementing the Graphql interface in Vue

Note: This article is about the basic knowledge p...

A simple tutorial on how to use the mysql log system

Table of contents Preface 1. Error log 2. Binary ...

Detailed explanation of Vue mixin usage and option merging

Table of contents 1. Use in components 2. Option ...

The most complete 50 Mysql database query exercises

This database query statement is one of 50 databa...

uniapp dynamic modification of element node style detailed explanation

Table of contents 1. Modify by binding the style ...

MySQL 8.0.22 winx64 installation and configuration method graphic tutorial

The database installation tutorial of MySQL-8.0.2...

Four data type judgment methods in JS

Table of contents 1. typeof 2. instanceof 3. Cons...