How to set element width in javascript-JS Tutorial-php.cn

How to set element width in javascript

青灯夜游

Release： 2023-01-05 16:12:04

Original

11184 people have browsed it

Javascript method to set the width of an element: first use the "document.getElementById("id value")" statement to obtain the element object; then use the "element object.style.width="width value"" statement to set the element width.

How to set element width in javascript

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

javascript sets element width

Principle:

Get element object
The width attribute of the HTML DOM Style object sets the width of the element.

Code example:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			img {
				width: 200px;
			}
		</style>
	</head>

	<body>
<img  id="img" src="img/1.jpg" / alt="How to set element width in javascript" >

<p id="demo">img图片宽度为200px。</p>

<button onclick="myFunction()">设置img图片的宽度</button>

<script>
	function myFunction() {
		document.getElementById("img").style.width="300px";
		document.getElementById("demo").innerHTML="img图片宽度为300px。";
	}
</script>
	</body>

</html>

Copy after login

Rendering:

How to set element width in javascript

Description:

The width property of the Style object can set the width of the element.

Syntax:

Object.style.width=auto|length|%

Copy after login

Value	Description
auto	default. The browser can calculate the actual width.
%	Defines the width based on the percentage of its containing block.
length	Use px, cm and other units to define the width.

Method to find elements:

1. Get elements based on id

document.getElementById("id属性的值");

Copy after login

2. Based on tag name Get the element

document.getElementsByTagName("标签的名字");

Copy after login

3. Get the element based on the value of the name attribute

document.getElementsByName("name属性的值");

Copy after login

4. Get the element based on the class attribute

document.getElementsByClassName("类样式的名字");

Copy after login

5. Get the element based on the css path (get one)

document.querySelector("css路径");

Copy after login

6. Get elements based on css path (get a group)

document.querySelectorAll("css路径");

Copy after login

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of How to set element width in javascript. For more information, please follow other related articles on the PHP Chinese website!