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

对事件作出反应\

<!--
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" onclick="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" onclick="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" onclick="myFunction()">点击这里</button>

<button type="button" onclick="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" onclick="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>

时间: 2024-11-10 11:32:48

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

关于Input内容改变的触发事件

1.onchange onchange 事件会在域的内容改变时触发.支持的标签<input type="text">, <textarea>, <select>,<keygen>. 注意:在元素的值改变了且失去焦点时触发(两次的值一样不会触发). 缺陷:通过js代码改变DOM的值不会触发,解决在js代码里改值了调用其change 的function() 或者调.change()方法. JS: 1 <input type="

input 内容改变的触发事件

1. onchange onchange 事件会在域的内容改变时触发.支持的标签<input type="text">, <textarea>, <select>,<keygen>. 注意:在元素的值改变了且失去焦点时触发(两次的值一样不会触发). 缺陷:通过js代码改变DOM的值不会触发,解决在js代码里改值了调用其change 的function() 或者调.change()方法. JS: <input type="t

JS来推断文本框内容改变事件

   oninput,onpropertychange,onchange的使用方法 onchange触发事件必须满足两个条件: a)当前对象属性改变,而且是由键盘或鼠标事件激发的(脚本触发无效) b)当前对象失去焦点(onblur):    onpropertychange的话,仅仅要当前对象属性发生改变,都会触发事件,可是它是IE专属的: oninput是onpropertychange的非IE浏览器版本号,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并不是该对象全部

使用Javascript改变HTML内容

avascript通常被用来操作HTML,改变网页内容! 向页面输出内容 Javascript提供了document.write('string')方法来向页面写入内容: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>

input中的内容改变时触发的事件

onchange事件在内容改变(两次内容有可能相等)且失去焦点时触发: onpropertychange事件是实时触发,每增加或删除一个字符就会触发,通过js改变也会触发该事件,但是该事件是IE专有. oninput事件是IE之外的大多数浏览器支持的事件,在value改变时实时触发,但是通过js改变value时不会触发:基本写原生常用的是oninput. oninput与onpropertychange失效的情况: oninput事件: 1.当脚本中改变value时,不会触发: 2.从浏览器的自

jquery文本框内容改变事件

/** * 内容改变时并不会触发事件,但是在失去焦点的时候会触发. */ $("#inputid").change(function(){ console.log($(this).val()); }); /** * 只要文本类容发生改变,就会触发该事件 */ $("#inputid").bind("input propertychange",function(){ console.log($(this).val()); });

input标签内容改变的触发事件

1. onchange事件与onpropertychange事件的区别: onchange事件在内容改变(两次内容有可能相等)且失去焦点时触发:onpropertychange事件是实时触发,每增加或删除一个字符就会触发,通过js改变也会触发该事件,但是该事件是IE专有. 2. oninput事件与onpropertychange事件的区别: oninput事件是IE之外的大多数浏览器支持的事件,在value改变时实时触发,但是通过js改变value时不会触发:onpropertychange事

div、span绑定内容改变事件

内容改变事件onchange只适用于form表单标签(input.select.textarea) 当需要对div.span标签进行内容改变监听则无法适用,查阅了一些资料发现jquery有针对的方法,代码如下: 1 <meta charset="UTF-8"> 2 <script src="jquery.min.js"></script> 3 <span id="s"> 4 <span id=

JavaScript和jQuery改变标签内容

HTML: <div id="mazey">content</div> JavaScript: var mazey=document.getElementById("mazey"); mazey.innerHTML=data; jQuery: $("#mazey").html(data); JavaScript和jQuery改变标签内容