JavaScript 简介-改变样式方法

JavaScript 简介

Html 内容可以通过Javascript 进行更改。

getElementById() 是 JS HTML 方法之一。

<!DOCTYPE html>
 <html>
 <body>
<h2>JavaScript Intro?</h2>
<p id="ex">JavaScript can change HTML contents.</p>
<button type="button" onclick='document.getElementById("ex").innerHTML = "Hello!"'>Click Me!</button>

</body>
 </html>

输出：

默认/单击按钮之前

在这里插入图片描述

单击按钮后 html 内容发生变化

CSS（Html 样式）可以通过 Javascript 进行更改：

<!DOCTYPE html>
 <html>
 <body>

<h1>JavaScript Intro</h1>

<p id="ex">Style of an HTML element can be changed from JS.</p>

<button type="button" onclick="document.getElementById('ex').style.fontSize='40px'">Click Me!</button>

</body>
 </html>

输出：

在这里插入图片描述

默认/单击按钮之前

在这里插入图片描述

单击按钮后 html 样式（CSS）发生变化

输出：

在这里插入图片描述

此处未隐藏 Html 内容

在这里插入图片描述

单击按钮后内容隐藏

HTML元素可以通过JS显示

使用JS可以通过改变显示样式来显示隐藏的Html元素。

<!DOCTYPE html>
 <html>
 <body>
<h1>JavaScript Intro</h1>
<p>HTML elements can be displayed from JS</p>

<p id="ex" style="display:none">Hello!</p>

<button type="button" onclick="document.getElementById('ex').style.display='block'">Click Me!</button>

</body>
 </html>

JavaScript 简介-改变样式方法

JavaScript 简介

Html 内容可以通过Javascript 进行更改。

getElementById() 是 JS HTML 方法之一。

输出：

默认/单击按钮之前

单击按钮后 html 内容发生变化

CSS（Html 样式）可以通过 Javascript 进行更改：

输出：

默认/单击按钮之前

单击按钮后 html 样式（CSS）发生变化

输出：

此处未隐藏 Html 内容

单击按钮后内容隐藏

HTML元素可以通过JS显示

使用JS可以通过改变显示样式来显示隐藏的Html元素。

输出：

这里不显示隐藏的html内容

点击按钮后显示隐藏的html内容

猜你喜欢

JavaScript 简介-改变样式方法

JavaScript 简介

Html 内容可以通过Javascript 进行更改。

getElementById() 是 JS HTML 方法之一。

输出 ：

默认/单击按钮之前

单击按钮后 html 内容发生变化

CSS（Html 样式）可以通过 Javascript 进行更改：

输出 ：

默认/单击按钮之前

单击按钮后 html 样式（CSS）发生变化

输出 ：

此处未隐藏 Html 内容

单击按钮后内容隐藏

HTML元素可以通过JS显示

使用JS可以通过改变显示样式来显示隐藏的Html元素。

输出 ：

这里不显示隐藏的html内容

点击按钮后显示隐藏的html内容

猜你喜欢

输出：

输出：

输出：

输出：