JavaScript-对事件作出反应\改变 HTML 内容\改变 HTML 样式\写入HTML输出

最新推荐文章于 2023-07-09 22:01:04 发布
最新推荐文章于 2023-07-09 22:01:04 发布
阅读量1.6k 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012701023/article/details/46228901
版权

对事件作出反应\

<!-- alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。

onclick 事件只是您即将在本教程中学到的众多事件之一。-->

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<center>
<body>
<h1>我的第一段 Java Script 代码</h1>

<p>
    JavaScript 能够对事件作出反应。比如对按钮的点击：
</p>

<button type="button" οnclick="alert('Welcome!')">点击这里</button>
</body>
</center>
</html>

改变 HTML 内容\

<!--您会经常看到 document.getElementByID("some id")。这个方法是 HTML DOM 中定义的。
DOM（文档对象模型）是用以访问 HTML 元素的正式 W3C 标准。
-->

<!-- 在这个例子中应当注意
1.getElementById 千万不要写错
2.id号可以是不同的，根据自己的需要自己定义，调用的时候要一一对应
3.编码格式要注意，在head中添加utf-8
4.<button type="button" οnclick="myFunction()">点击这里</button>这段代码不是在script标签中！！！
5.结合事件处理来修改自己的代码
-->


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

<center>
<body>
<h1>我的第一段 JavaScript</h1>

<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>

<p id="Angel">
U o _ o U
</p>

<script>
    function myFunction()
    {
        x=document.getElementById("demo");//查找元素
        x.innerHTML="Hello JavaScript!";//改变内容
    }

        function myFunction_1()
    {
        y=document.getElementById("Angel");
        y.innerHTML="Today is a fun day!";
    }

</script>
<button type="button" οnclick="myFunction()">点击这里</button>
<button type="button" οnclick="myFunction_1()">点击这里</button>
</body>
</center>
</html>

改变 HTML 样式\

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


Happy Birthday To You !!!


</p>
<body>
<script>
    function myfunction()
    {
        x=document.getElementById("demo") // 找到元素
        x.style.color="#ff0000";          // 改变样式
    }
</script>

<button typte="button" οnclick="myfunction()">点击开始</button>
</body>
</center>
</html>

写入HTML输出

<!--只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。-->

<!DOCTYPE html>
<html>
<center>
<head>
    <title></title>
</head>
<body>
<script>
    document.write("<h1>This is a heading</h1>");
    document.write("<p>This is a paragraph</p>");
</script>
</body>
</center>
</html>

-FIGHTING-
关注
专栏目录
前端基础之Html、CSS、JavaScript、JQuery、Ajax
pybstudyjava的博客
03-29 1834
前端 1.HTML XML：可扩展标记语言 XHTML：可扩展的超文本标记语言 1. HTML 概述 HTML：超文本标记语言 网页组成：文字 + 图片 + 表格 + 表单 + 链接 + 视频 + 音频 网页文件的格式：htm ，html 网页的注释：<!-- 注释的内容 --> html 结构 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh
html+css+js基础问答
qq_43751465的博客
08-26 5226
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
JavaScript修改HTML的内容
weixin_59246157的博客
03-24 1416
/ document.querySelector(".myText").innerText = "新的文本内容";document.getElementById("myText").innerHTML = "新的文本内容";document.querySelector(".myText").innerHTML = "新的文本内容";// elements[i].innerText = "新的文本内容";// elements[i].innerText = "新的文本内容";
php 修改 html元素,HTML DOM 修改
weixin_42515796的博客
04-10 475
HTML DOM - 修改学完本节，您将了解：如何修改 HTML = 改变元素、属性、样式和事件。修改 HTML 元素修改 HTML DOM 意味着许多不同的方面： 改变 HTML内容删除已有的 HTML 元素改变事件(处理程序)在接下来的章节，我们会深入学习修改 HTML DOM 的常用方法。创建 HTML 内容改变元素内容，最简单的方法是使用 innerHTML 属性。下面的例子改变一个 元...
JavaScript 对 HTML 改变文本事件的不同方法
weixin_44538353的博客
02-21 517
开发工具与关键技术：DW JS的语法 作者：卢雅婷 撰写时间：2019/02/21 今天我复习了 JavaScript HTML DOM 事件，因其HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应，其HTML 事件的例子大概有：（代码等资料来源于w3school） 当用户点击鼠标时 当网页已加载时 当图像已加载时 当鼠标移动到元素上时 当输入字段被改变时 当提交 H...
修改HTML
qq_44642803的博客
02-09 356
HTML元素的所有读写属性都能可被修改 修改HTML元素通常通过修改如下几个常用属性来实现 下面的示例代码演示了一个可编辑的表格，在页面中指定需要修改的表格行、列，然后输入要修改的值，即可动态修改单元格的内容。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8...
JavaScript与HTML结合的基本使用方法整理
12-19
2. **对事件作出反应**： JavaScript 可以响应用户的交互事件，如点击按钮。`onclick` 是一个常见的事件属性，可以与 JavaScript 函数配合使用。例如： ```html ('Welcome!')">点击这里 ``` 这里的 `alert()` ...
JavaScript
Quella_ly的博客
06-29 1022
==JavaScript 是一门跨平台、面向对象的脚本语言==，而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。JavaScript 是用来控制网页行为的，它能使网页可交互；那么它可以做什么呢？如改变页面内容、修改指定元素的属性值、对表单进行校验等，下面是这些功能的效果展示：改变页面内容当我点击上面左图的 按钮，按钮上面的文本就改为上面右图内容，这就是js 改变页面内容的功能。修改指
JavaScript ,js基础
qq_53587164的博客
03-17 1406
2D 转换 在本章您将了解2D变换方法： translate() rotate() scale() skew() matrix() 实例 div{transform:rotate(30deg); -ms-transform:rotate(30deg); /* IE 9 */-webkit-transform:rotate(30deg); /* Safari and Chrome */} translate() 方法 正在上传…重新上传取消正在上传…重新上传取消 transl...
简易正则替换html字符串中的文字(不影响标签属性)
03-12
不影响标签属性的简易正则替换html字符串中的文字(原理为使用正则取出html中><之间的内容 然后使用循环从其中匹配对应的内容进行替换)
HTML 怎么修改,怎么修改HTML
weixin_33524408的博客
06-03 166
回答：帮你完善了一些，不明白的地方再讨论 functioncheck(){varpwd1=document.getElementById("p1").value;varpwd2=document.getElementById("p2").value;if(pwd1!=pwd2){document.getElementById("err_pwd").style.display="block";ret...
如何直接修改html文件,如何修改HTML的文件？
weixin_29952601的博客
06-03 6366
回答：HTML文件制作方法如下：一、打开简单的文本编辑器。大部分文本编辑软件都能编写HTML，不过，复杂的软件有自动格式功能，比较难组织HTML页面。 二、将文件格式改成“网页”(Web Page)、“.html”或“.htm”，存在容易找到的位置。上面三个选择是一样的，没有差别。 三、用网页浏览器打开文件，双击文件，它应该会自动在浏览器打开，但现在还只是个空白网页。 四、更新网页，查看已保存的...
项目实训-对已经编辑好的html文本进行修改.py
weixin_44171618的博客
05-28 485
1.由于一些原因，需要对已经编辑好的html文件进行修改 具体修改如下： 1>在sample文件夹下的每个文件夹{filename}中有两个HTML文件{filename}.html,{filename+sample}.html 2>对filename.html做出的处理是： 在<div class="left">后加入一些语句<li>.... 3>对{filename+sample}.html做出的处理是： 在</div></div
用户页面-页面进行增删改（html+css+js
最新发布
qq_51365907的博客
07-09 2309
：在页面输入新用户信息，完成新增用户，点击删除按钮进行删除，点击修改按钮，弹出新的页面进行修改，保存修改后在页面显示。
javascript能够对事件做出反应，比如：按钮点击
weixin_40544724的博客
08-02 612
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title-2&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&amp
html 事件 菜鸟教程,HTML DOM 事件
weixin_29658641的博客
06-10 237
HTML DOM - 事件HTML DOM 允许 JavaScript 对 HTML 事件作出反应。实例Mouse Over MeClick Me对事件作出反应当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。如需在用户点击某个元素时执行代码，请把 JavaScript 代码添加到 HTML 事件属性中：onclick=JavaScriptHTML 事件的例子：当...
前端html通过鼠标操作进行样式的更改
非专业Bug开发工程师的博客
09-05 2371
html通过鼠标操作进行样式的更改 目标效果 第一种情况： 鼠标悬浮在上方，样式更改，鼠标离开后还原。 第二种情况： 鼠标点击后，样式更改，鼠标松开后还原。 第三种情况： 鼠标点击并松开后，样式更改。 第四种情况： 鼠标悬浮在上方，样式更改，鼠标离开后样式不变。 第五种情况： 鼠标点击后，样式更改，鼠标松开后样式不变。 第六种情况： 鼠标点击并松开后，样式更改，鼠标离开后还原。 代码 .css &...
HTML DOM（样式、事件）
litengbin的博客
01-17 428
HTML DOM 样式 一个元素节点的style属性即对应的css 1.隐藏和显示 通过给元素的style.display 赋值，改变显示还是隐藏 隐藏div 显示div 这是一个div function hide(){ var d = document.getElementById("d"); d.style.display="n
用户输入的密码和确认密码必须一致
热门推荐
FIGHTING的专栏
06-10 1万+
//输入密码，并判断密码是否一致  function funpsd(){   var psd=document.form1.psd.value   if(psd==""){    document.getElementById("sp1").innerHTML="密码不能为空";    }   else if(psd.length15){    document.getElement
使用HTML与JavaScript动态改变矩形尺寸
本文将深入探讨如何通过HTML事件来改变矩形元素的大小，从而实现网页元素的动态响应。这不仅适用于简单的矩形，也可以应用于更复杂的交互式设计，如拖动调整、图片缩放等。 ### 创建HTML结构 首先，我们需要在HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值