mooc网笔记 javascript入门篇 2

来源：互联网发布：监控系统知乎编辑：程序博客网时间：2024/06/06 03:39

注：javascript是大小写敏感的，注意不要打错函数

1.通过id获取元素：

 document.getElementById(“id”); \\获取标签 document.getElementById(“id”).innerHTML;\\获取标签内容

获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。

返回结果为 null或[object HTMLParagraphElement];

object.innerHTML用于获取元素的内容，可以对其进行修改。

例如：

<p id="con">JavaScript</p>
<script type="text/javascript">
var mychar=document.getElementById("con");
document.write("结果:"+mychar+'<br>'); //输出获取的P标签。
mychar = document.getElementById('con').innerHTML;

document.write("结果:"+mychar+'<br>'); //输出获取的P标签的内容。

2.改变标签样式 object.style.property = "new style";

基本属性表如下：（属性值为html标签里设定的那些）

例如：

   mychar.style.color="red";   mychar.style.fontSize="20";   mychar.style.backgroundColor ="blue";

3.显示和隐藏 object.style.display = "none" "block"

none 表示隐藏属性；block表示显示为块级元素；

4.属性值 object.classname = "类名";

className 可以进行属性设置，也可以返回元素的class 属性。

练习：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
body{font-size:12px;}
#txt{
    height:400px;
    width:600px;
   border:#333 solid 1px;
   padding:5px;}
p{
   line-height:18px;
   text-indent:2em;}
</style>
</head>
<body>
<h2 id="con">JavaScript课程</H2>
<div id="txt">
     <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
        <p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p>
        <p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
        <p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
</div>
<form>

    <input type="button" value="改变颜色" onClick = "changecolor()" >
    <input type="button" value="改变宽高" onClick = "changewg()" >
    <input type="button" value="隐藏内容" onClick = "hideword()">
    <input type="button" value="显示内容" onClick = "displayword()">
    <input type="button" value="取消设置" onClick = "cancelconfig()">
</form>
<script type="text/javascript">
//定义"改变颜色"的函数
    function changecolor()
    {
        var mytype = document.getElementById("txt");
        mytype.style.color = "red";
        mytype.style.backgroundColor = "#CCC";
    }
//定义"改变宽高"的函数
    function changewg()
    {
        var mytype = document.getElementById("txt");
        mytype.style.width = "400";
        mytype.style.height = "600";
    }
//定义"隐藏内容"的函数
    function hideword()
    {
        var mytype = document.getElementById("txt");
        mytype.style.display = "none";
    }
//定义"显示内容"的函数
    function displayword()
    {
        var mytype = document.getElementById("txt");
        mytype.style.display = "block";
    }
//定义"取消设置"的函数
    function cancelconfig()
    {
        var temp = confirm("是否取消设置？");
        if(temp)
        {
            var mytype = document.getElementById("txt");
            mytype.style.height="400px";
            mytype.style.width="600px";
            mytype.style.display = "block";
            mytype.style.backgroundColor = "#fff";
            mytype.style.color = "#000";
        }
    }
</script>
</body>
</html>

0 0

mooc网 笔记 javascript入门篇 2

mooc网笔记 javascript入门篇 2