Rumah >hujung hadapan web >tutorial js >Bagaimana untuk menambah sempadan kepada elemen dalam javascript

Bagaimana untuk menambah sempadan kepada elemen dalam javascript

青灯夜游
青灯夜游asal
2021-09-16 17:26:069421semak imbas

Cara menambah sempadan pada elemen dalam JavaScript: 1. Gunakan pernyataan "elemen object.style.border="width value style value color value"" 2. Gunakan "element object.style.cssText ="border : Nilai lebar nilai gaya nilai warna "" pernyataan.

Bagaimana untuk menambah sempadan kepada elemen dalam javascript

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

Kaedah 1: Gunakan atribut sempadan DOM HTML

Sintaks: Object.style.border=borderWidth borderStyle borderColor

Contoh:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" id="remove">
		<style>
			div{
				width: 80px;
				height: 30px;
				margin: 10px auto;
			}
		</style>
	</head>

	<body style="text-align:center;">
		<p style="font-size: 19px; font-weight: bold;">单击按钮给div元素添加边框</p>
		<div id="div">div元素</div>
		<button onClick="Fun()">点击这里</button>
		<script>
			var div = document.getElementById(&#39;div&#39;); //获取div元素对象

			function Fun() {
				div.style.border="1px solid red"; //给div元素对象添加样式
			}
		</script>
	</body>
</html>

Rendering:

Bagaimana untuk menambah sempadan kepada elemen dalam javascript

2. Gunakan atribut cssText

Intipati cssText adalah untuk menetapkan atribut gaya daripada nilai elemen HTML.

Sintaks: Object.style.cssText="属性名:属性值";

Contoh:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" id="remove">
		<style>
			div{
				width: 80px;
				height: 30px;
				margin: 10px auto;
			}
		</style>
	</head>

	<body style="text-align:center;">
		<p style="font-size: 19px; font-weight: bold;">单击按钮给div元素添加边框</p>
		<div id="div">div元素</div>
		<button onClick="Fun()">点击这里</button>
		<script>
			var div = document.getElementById(&#39;div&#39;); //获取div元素对象

			function Fun() {
				div.style.cssText="border:1px dashed green"; //给div元素对象添加样式
			}
		</script>
	</body>
</html>

Rendering:

Bagaimana untuk menambah sempadan kepada elemen dalam javascript

【 Disyorkan pembelajaran: Tutorial JavaScript Lanjutan]

Atas ialah kandungan terperinci Bagaimana untuk menambah sempadan kepada elemen dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn