dom编程初步了解

最新推荐文章于 2022-09-01 17:06:07 发布

景天晓志

最新推荐文章于 2022-09-01 17:06:07 发布

阅读量277

点赞数

分类专栏： JavaScript 文章标签：编程 button function xhtml html

本文链接：https://blog.csdn.net/jingtian_xiaozhi/article/details/8044740

版权

JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>无标题文档</title>  
<!--script和css忘写类型了，impute的click是demo（）忘写括号了，obj的className大写-->  
<script type="text/javascript">  
    var b=true;  
    function demo1()  
    {  
        var obj =document.getElementById("divid");  
        //alert(obj.tagName);  
        //alert(obj.innerText);  
        if(b)  
        {  
            obj.innerText="呵呵O(∩_∩)O~呵呵";  //全部内容
            b=false;  
        }  
        else  
        {  
            obj.innerText="哈哈O(∩_∩)O哈哈~哈哈";  
            b=true;  
        }  
      
    }  
    function demo2()  
    {  
        var obj =document.getElementById("divid");  
        //alert(obj.className);  
        obj.className="font";  
          
      
    }  
    var rValue=parseInt(Math.random()*10+1);  
    function demo3()  
    {  
        var obj =document.getElementById("textid");  
        var num=obj.value;  
        if(rValue>num)  
            alert("小了啊");  
        else if(rValue<num)  
            alert("大了啊");  
        else  
            alert("中了");  
          
      
    }  
  
</script>  
  
<style type="text/css">  
    .font{
	 color:#F00;
	 font-size:36px;  
    }  
      
</style>  
</head>  
  
<body>  
    <input type="button" value="改内容" οnclick="demo1()" /></input>  
    <input type="button" value="上色" οnclick="demo2()" /></input>  
    <div id="divid" style=" text-align:center">  
        哈哈O(∩_∩)O哈哈~哈哈
    </div>  
    <hr/>  
    <input type="button" value="猜数字" οnclick="demo3()" /></input>  
    <input type="text" id="textid"/></input>  
  
</body>  
</html>

景天晓志

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dom编程初步了解

无标题文档 var b=true; function demo1() { var obj =document.getElementById("divid"); //alert(obj.tagName); //alert(obj.innerText); if(b)
复制链接

扫一扫