JSdom操作内容，样式，属性
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p> <script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script> <p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph.</p>
<button onclick="myFunction()">点击这里</button>
<script>
function myFunction()
{
document.write("糟糕！文档消失了。");
}
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head> <body>
<h1>我的第一段JavaScript</h1>
<p>
JavaScript 能够对事件作出反应。比如对按钮的点击：
</p>
<button type="button" onclick="alert('hello world!')">点击这里</button>
</body>
</html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head> <body><h1>我的第二段 JavaScript</h1>
<p id="demo">JavaScript能改变html的内容</p>
<script>
function myFunction()
{x=document.getElementById("demo");//找到元素 x.innerHTML="hello javascript";//改变内容
}
//document.getElementById("demo").innerHTML="hello javascript";
; </script> <button type="button" onclick="myFunction()">点击这里</button> </body> </html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head> <body> <script>
function changeimage()
{element=document.getElementById("myimage")
if(element.src.match("W020140820293362535623"))//匹配
{
element.src="素材/fad4e632d27affc7d69ccf49bf08cf79.jpg";
} else
{
element.src="素材/W020140820293362535623.jpg";
}
}
</script>
<img id="myimage" onclick="changeimage()" src="素材/W020140820293362535623.jpg">
<p>点击图片更改图片</p>
<p>javascript能改变任意html元素的大多数属性，而不仅仅是图片</p>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head> <body>
<h1>我的第三段 JavaScript</h1> <script>
function myFunction()
{x=document.getElementById("demo") // 找到元素
if(x.style.color="#0C3")
{x.style.color="#03C";
}
else
{
x.style.color="#0C3";} // 改变样式
}
</script>
<p id="demo" onclick="myFunction()" style="color:#0C3">
JavaScript 能改变 HTML 元素的样式。
</p>
<button type="button" onclick="myFunction()">点击这里</button>
<p>怎么不行呢？</p>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head> <body>
<img id="myimage" onclick="changeimage()" src="素材/W020140820293362535623.jpg">
<script type="text/javascript" src="myjavascript/改变图片.js"></script>
<p>调用外部JavaScript</p>
<p><b>提示：</b>外部脚本不能包含 <script> 标签。</p>
<p><b>注释：</b>changeimage保存在名为 "改变图片.js" 的外部文件中。</p>
</body>
</html>
JSdom操作内容，样式，属性的更多相关文章
- Jquery中animate可以操作css样式属性总结
可以用 animate() 方法来操作所有 CSS 属性吗? 是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate()时, 必须使用 Camel 标记法书写所有的属性名,比如,必须使用 ...
- css内容样式属性
设置元素的最大高度.最小高度.最大宽度.最小宽度,用max-height.min-height.max-width.min-width. visibility:设置元素是否可见.visible和hid ...
- jQuery-操作元素的内容，属性，样式
1.操作内容 获取: 双标签:html() input:val() 设置: 双标签:html('新内容') input:val('新内容') 2.操作属性 * 获取:attr('属性名') * 设置: ...
- ActionBar官方教程(11)自定义ActionBar的样式(含重要的样式属性表及练习示例)
Styling the Action Bar If you want to implement a visual design that represents your app's brand, th ...
- JavaScript学习笔记——DOM_对document对象的内容、属性、样式的操作
javascript-对文档对象的内容.属性.样式的操作 一.操作内容 1. innerHTML 用来设置或获取对象起始和结束标签内的内容(识别html标签) 2. innerText 用来设置或获取 ...
- 【2017-03-31】JS-DOM操作：操作属性、彩虹导航栏、定时器、操作内容、创建元素并添加、操作相关元素
一.操作属性 1.什么是属性: <div class="div" id="div1" style="" ></div> ...
- jq选择器（jq 与 js 互相转换），jq操作css样式 / 文本内容， jq操作类名，jq操作全局属性,jq获取盒子信息,jq获取位置信息
jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...
- PHP Jquery 代码操作 内容 属性 样式 事件 Json数据
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS之document对象（找元素、操作内容、操作属性、操作样式及4道例题）
document对象 一.找元素 1.根据id找 示例: <input id = "a" type="button" value="找元素&qu ...
随机推荐
- 廖雪峰Java5集合-3Map-Properties的使用
Properties用于读取配置 properties文件只能使用ASCII码 #表示注释 可以从文件系统读取.properties文件 Properties props = new Properti ...
- python动态绑定属性和方法
基于Python 2.7.13测试. Python是动态语言,在类定义了之后,还可以动态地绑定属性和方法. 下面先来看怎么给类的实例动态地绑定属性和方法. >>> class Stu ...
- Jmeter（十七）Logic Controllers 之 Interleave Controller
Interleave Controller----交错控制器,对于交错控制器官方文档解释的很清楚,上例子: 可以看到运行一次 Interleave Controller下的Sampler,运行一次 I ...
- [UE4]加入音效
- [UE4]用Blenspace混合空间动画代替AimOffset动画偏移
- CRM 报表中 Filtered 无数据
数据源设置为以下才可以使用 Filtered+实体名称和 fn_FindBusinessGuid 和 fn_FindUserGuid
- python基础知识-（1）语法基础知识总结(转载）
1.Python标识符 在 Python 里,标识符有字母.数字.下划线组成. 在 Python 中,所有标识符可以包括英文.数字以及下划线(_),但不能以数字开头. Python 中的标识符是区分大 ...
- alt.js 使用教程
1.action : import alt from "../alt.js"; class DemoActions{ constructor() { this.generateAc ...
- QQ聊天字体选择
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- JS自学总结的零散知识点
1.使用new关键字的时候后面不能接这种变量而是接一个结构constructor 例如由function引导的结构 而不是像如下这样 var car={ lunzi : 4}; 这个只是一个变量而不是 ...