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 ...
随机推荐
- SQL删除指定列的指定长度的字符
update );
- Linux CentOS 下关闭防火墙
永久关闭(重启后生效) 开启: chkconfig iptables on 关闭: chkconfig iptables off 临时关闭(重启后失效) 开启: service iptables st ...
- 【ZZ】详解哈希表的查找
详解哈希表的查找 https://mp.weixin.qq.com/s/j2j9gS62L-mmOH4p89OTKQ 详解哈希表的查找 2018-03-01 算法与数据结构 来自:静默虚空 http: ...
- [转][C#]Web.config 相关配置
设置默认首页 <?xml version="1.0" encoding="UTF-8"?> <configuration> <sy ...
- Jmeter（三十）Jmeter Question 之 循环+事务的妙用
先提一个小问题,也是当时在对Jmeter还是懵懂之时,亲身碰到过的一个问题. 真实的业务场景---“登录一次,提交订单N次”,当然该处是两个接口. 提现接口是需要判断用户是否在线,换句话说,服务器需要 ...
- [UE4]移动小地图
让玩家角色永远处于小地图的中心位置. 一.将RoundMiniMap的StaticMiniMap使用Canvas Panel包裹,StaticMiniMap的锚点Anchors设置为中心对齐 二.新建 ...
- CentOS用户和用户组管理
groupadd grptest1 按照系统默认的gid创建组.根uid一样,gid也是从1000开始的. groupadd -g 1008 grptest2 创建gid=1008的用户组:g ...
- Devlopment Env Setup install ubuntu16.04
http://blog.csdn.net/ljheee/article/details/52966048 1.add chinese language support settings -> i ...
- MySQL也真是让人郁闷(关于子查询中使用limit)
在MySQL4.1中子查询是不能使用LIMIT的,手册中也明确指明 “This version of MySQL doesn’t yet support ‘LIMIT & IN/ALL/ANY ...
- MVP与MVC的区别
MVP的主要思想就是解耦View和Model 先大致从图上看一下MVP和MVC又什么不同: MVC: M : Model 数据模型,就是对数据的封装和保存: V : View 视图界面,相当于布局文件 ...