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 ...
随机推荐
- Java-Runoob-高级教程-实例-数组：10. Java 实例 – 查找数组中的重复元素-un
ylbtech-Java-Runoob-高级教程-实例-数组:10. Java 实例 – 查找数组中的重复元素 1.返回顶部 1. Java 实例 - 查找数组中的重复元素 Java 实例 以下实例 ...
- [转][xml]SQL转义
SQL语句包含">"和"<"时,在PL/SQL中可以正常运行,但是放在XML中,编译报错,这是因为在XML文档中的所有文本都会被解析器解析,文本内容 ...
- oracle数据库归档与非归档
oracle运行的时候至少需要两组联机日志,每当一组日志写满后会发生日志切换,继续向下一组联机日志写入. 如果是归档模式,则会触发ARCn进程,把切换后的重做日志文件复制到归档日志文件. 如果是非归档 ...
- [UE4]用Blenspace混合空间动画代替AimOffset动画偏移
- CRM 2016 IFrame 子页面执行 父页面函数
CRM 中定义以下函数: windows.parent.functionname(){ //do somethion } IFrame 子页面调用 JS: windows.parent.functio ...
- MyBatis 工作原理
参考链接: 深入理解Mybatis原理:http://blog.csdn.net/luanlouis/article/details/40422941 MyBatis原理:http://www.jia ...
- MAC 无脑编译OpenCV
1:准备好OpenCV 源码包 下载地址:https://opencv.org/releases.html 编译教程:https://blog.csdn.net/computerme/article/ ...
- ERROR hive.HiveConfig: Could not load org.apache.hadoop.hive.conf.HiveConf. Make sure HIVE_CONF_DIR is set correctly.
Sqoop导入mysql表中的数据到hive,出现如下错误: ERROR hive.HiveConfig: Could not load org.apache.hadoop.hive.conf.Hi ...
- java的Map遍历
java中的map遍历有多种方法,从最早的Iterator,到java5支持的foreach,再到java8 Lambda,让我们一起来看下具体的用法以及各自的优缺点 先初始化一个mappublic ...
- MySQL密码强度验证修改
MySQL5.6.6版本之后增加了密码强度验证插件validate_password,相关参数设置的较为严格. 影响的语句和函数有:create user,grant,set password,pas ...