【JavaScript学习笔记】小案例

最新推荐文章于 2022-04-20 20:43:22 发布

喜欢哲学的女孩

最新推荐文章于 2022-04-20 20:43:22 发布

阅读量310

点赞数

分类专栏： Java相关开发

本文链接：https://blog.csdn.net/XGsilence/article/details/79094861

版权

Java相关开发专栏收录该内容

27 篇文章 0 订阅

订阅专栏

JavaScript小案例
标记语言文档
元素ul,li组成一个无序列表,例如，

    <ul>
        <li>橘子</li>
        <li>苹果</li>
        <li>香蕉</li>
    </ul>
    超链接<a href=" "><a>

函数：
getAttribute
出各种属性的值查询出来,只有一个参数就是打算查询的属性的名字object.getAttribute(attribute);getAttribute不能通过document对象调用,只能通过一个元素节点调用它可以把它与getElementsByTagName()方法结合起来
var para = document.getElementsByTagName(“p”);
for(var i = 0;i < para.length;i++){
alert(para[i].getAttribute(“title”));
}
setAttribute
对属性节点的值做出修改
setAttribute不能通过document对象调用,只能通过一个元素节点调用它
setAttribute
此方法需要向它传递两个参数object.setAttribute(attribute,value);
getElementById
通过id属性值,方法将返回一个与那个有着给定id属性值的元素节点相对应的对象document.getElementById(id);
getElementsByTagName方法
将返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素，这个方法只有一个参数，是HTML的名字
例如：document.getElementsByTagName(“li”);
这个调用将返回一个对象数组，每个对象分别对应着document对象中的一个列表项(li)元素
在当前文本中插入CSS代码，需要使用

    <style type="text/css"><style>

代码：

<html>
<style type="text/css">
body{
    font-family:"Helvetica","Arial",sans-serif;
    color:#333;
    background-color:#ccc;
    margin:1em 10%;
}h1{
    color:#333;
    background-color:transparent;
}a{
    color:#c60;
    background-color:transparent;
    font-weight:bold;
    text-decoration:none;
}ul{
    padding:0;
}li{
    float:left;
    padding:1em;
    list-style:none;
}
</style>
<head>
<title>Image Gallery</title>
</head>

<body>
<h1>Snapshots</h1>
<ul>
    <li>
        <a href="images/coff.jpg" onclick="showpic(this);return false;" title="coff">COFF</a>
    </li>
    <li>
        <a href="images/rose.jpg" onclick="showpic(this);return false;" title="rose">ROSE</a>
    </li>
    <li>
        <a href="images/timg.jpg" onclick="showpic(this);return false;" title="timg">TIMG</a>
    </li>
    <img id="placeholder" src="images/placeholder.jpg" alt="my image galley">
</ul>
</body>

<script>
    function showpic(p){
        var source = p.getAttribute("href");
        var placeholder = document.getElementById("placeholder");
        placeholder.setAttribute("src",source);
    }

</script>
</html>