二、JavaScript之点击按钮改变HTML样式 (CSS)

一、代码如下

二、点击前

三、点击后

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>

<h2>JavaScript 能够做什么</h2>

<p id="demo">JavaScript 能够改变 HTML 元素的样式。</p>

<button type="button" onclick="document.getElementById(‘demo‘).style.fontSize=‘35px‘">
点击我！
</button>

</body>
</html>

原文地址：https://www.cnblogs.com/tianpan2019/p/11302321.html

时间： 2024-10-13 12:17:23

二、JavaScript之点击按钮改变HTML样式 (CSS)的相关文章

JavaScript DOM操作案例点击按钮通过类样式的方式显示跟隐藏div

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 300px; height: 300px; background-color: pink; } .cls { display: none; } </style> </h

JavaScript基础点击按钮获得表格第一行的id

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

javascript之点击按钮实现放大、缩小字体

点击按钮改变状态的颜色

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang SC" } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang SC"; min-height: 17.0px } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #e82300 }

点击按钮改变多张图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

JS改变 HTML 样式(CSS)

HTML DOM 允许 JavaScript 改变 HTML 元素的样式.如何改变 HTML 元素的样式呢? 语法: Object.style.property=new style; 注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素. 基本属性表(property): 注意:该表只是一小部分CSS样式属性,其它样式也可以通过该方法设置和修改. 看看下面的代码: 改变 <p> 元素的样式,将颜色改为红色,字号改为2

Android基础TOP5_4:点击按钮更换样式，设置透明度

在res/drawable创建两个样式点击前/点击后 round: 1 <?xml version="1.0" encoding="utf-8"?> 2 <shape xmlns:android="http://schemas.android.com/apk/res/android"> 3  4 &

点击按钮倒计时60秒方可再次点击发送的Js代码

本节内容:Javascript 实现点击按钮倒计时60秒方可再次点击发送的效果. 比如,一些网站上的手机短信认证的功能,有类似实现点击按钮后,倒计时60秒才能再次点击发送的效果. 本文用Javascript实现点击按钮后,倒计时60秒才能再次点击发送验证码的功能. 例子: 复制代码代码示例: <input type="button" id="btn" value="免费获取验证码" /><script type="

一、JavaScript之第一个实例，点击按钮修改文本内容

一.代码如下: 二.运行后效果如下三.点击按钮,"曾经沧海难为水"变成了日期事件了 <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <body> <h2>我的第一段 JavaScript</h2> <button type=&quo