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

Related commands to completely uninstall nginx under ubuntu16.04

nginx Overview nginx is a free, open source, high...

Tomcat maxPostSize setting implementation process analysis

1. Why set maxPostSize? The tomcat container has ...

Vue makes div height draggable

This article shares the specific code of Vue to r...

How to implement simple data monitoring with JS

Table of contents Overview first step Step 2 Why ...

How to connect to a remote docker server with a certificate

Table of contents 1. Use scripts to encrypt TLS f...

Mysql implementation of full-text search and keyword scoring method example

1. Introduction Today a colleague asked me how to...

A comprehensive summary of frequently used statements in MySQL (must read)

The knowledge points summarized below are all fre...

Ubuntu Server 16.04 MySQL 8.0 installation and configuration graphic tutorial

Ubuntu Server 16.04 MySQL 8.0 installation and co...

Introduction to Linux environment variables and process address space

Table of contents Linux environment variables and...

Display special symbols in HTML (with special character correspondence table)

Problem Reproduction When using HTML for editing,...

Quickly solve the problem of slow and stuck opening of input[type=file]

Why is it that when the input tag type is file an...

Detailed explanation of MySQL delayed replication library method

Simply put, delayed replication is to set a fixed...

In-depth understanding of Vue transition and animation

1. When inserting, updating, or removing DOM elem...

In-depth understanding of Worker threads in Node.js

Table of contents Overview The history of CPU-bou...