效果可以在这里查看
Javascript的一些能力
能够改变HTML内容
getElementById() 是多个Javascript HTML方法之一。
下面的例子使用这个方法来查找id=“1”的HTML元素，并且把元素内容（innerHTML）更改为所想要的值。
document.getElementById("1").innerHTML="Hello world!";
Javascript功能示例1
点击我Javascript同时接受双引号和单引号；也就是说上面的= 后面的双引号改为单引号也是正确的。
能够改变HTML的属性
<div><button type="button" onclick="document.getElementById('3').src='https://img-blog.csdnimg.cn/3cc313136a014e478df84f849af66d38.png';">樱狼</button>
<button type="button" onclick="document.getElementById('3').src='https://img-blog.csdnimg.cn/33de9db9be074ab18d4f7c050d238e01.png';">月可</button>
<img src="" id="3"/></div>
需要注意双引号内如果还需要使用双引号，最好使用单引号，否则浏览器可能读取错误，造成设计效果无效。
可以改变HTML样式
<div>
<p id="2">
这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字
</p>
<button type="button" onclick="document.getElementById('2').style.fontSize='2em'">
点击我
</button>
</div>
这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字
点击我可以隐藏和显示HTML元素
<div>
<p id="4" style="display:none;">
这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字
</p>
<button type="button" onclick="document.getElementById('4').style.display='block'">
显示
</button>
<button type="button" onclick="document.getElementById('4').style.display='none'">
隐藏
</button>
</div>
这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字
显示 隐藏JavaScript的使用
<script>标签
在HTML中，JavaScript代码必须位于此标签之中。
<p id="6"></p>
<script>
document.getElementById("6").innerHTML ="Hello world!";
</script>
1
旧的JavaScript例子可能会用type 属性：<script type=“text/javascript”>。
但是这个属性不是必须的。JavaScript是HTML中默认的脚本语言。
JavaScript函数和事件
JavaScript函数是一种JavaScript代码块，它可以在调用时被执行。
head和body中的JavaScript
可以在HTML文档中国放置任意数量的脚本。
脚本可以被放置在HTML界面的body和head部分之中。
head中的JavaScript
下面的例子将函数放在head中，并在点击按钮时使用：
<head>
<script>
function myFunction() {
document.getElementById("7").style.display = "none";
}
</script>
</head>
<body>
<p id="7">
这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
</p>
<button onclick="myfunction()">
点击我隐藏段落
</button>
</body>
body中的JavaScript
<body>
<p id="7">
这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
</p>
<button onclick="myfunction()">
点击我隐藏段落
</button>
<script>
function myFunction() {
document.getElementById("7").style.display = "none";
}
</script>
</body>
这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
点击我隐藏段落建议 把脚本放置在body元素的底部，可以改善显示速度，因为脚本编译会拖慢显示。
外部脚本
可以编写一个脚本文件，假设命名为1.js ，那么就可以像这样把脚本文件引用到html文档中。
<p id="id1">一个段落。</p>
<button type="button" onclick="myFunction()">试一试</button>
<script src="/1.js"></script>
JavaScript 的文件扩展名时.js 。
引用外部脚本时在<script>标签中使用src 属性引用即可。
外部脚本中不能包含<script>标签。
外部脚本的优势
引用外部脚本的优势如下：
- 分离了HTML和代码
- 令HTML和JavaScript更易于阅读和维护
- 已缓存的JavaScript文件可以加速页面加载
如果需要添加多个脚本文件可以使用多个脚本标签：
<script src="1.js"></script>
<script src="2.js"></script>
外部引用
可以通过完整的URL或者相对路径引用外部脚本。
规则与相对路径和绝对路径一样。
6616
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
