js的HTML属性操作

<input type="button" id="btn1" value="按钮" />

HTML属性操作：读、写

　　属性名

　　属性值

属性都操作：获取、找到

　　元素.属性

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function () {
            var oBtn=document.getElementById(‘btn1‘);
            alert(oBtn.value);
        };
    </script>
</head>
<body>
    <input type="button" id="btn1" value="按钮" />
</body>

　　如果你不想一访问页面就弹出窗口，那就要加一个点击事件；（匿名函数）

<script>
        window.onload=function () {
            var oBtn=document.getElementById(‘btn1‘);
            oBtn.onclick=function () {
                alert(oBtn.value);　　　　//调用一个点击事件
            };
        };
    </script>

　　再来看一个操作：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function () {
            var oBtn=document.getElementById(‘btn1‘);
            var oText=document.getElementById(‘text1‘);
            oBtn.onclick=function () {
                //alert(oBtn.value);
                alert(oText.value);
            };
        };
    </script>
</head>
<body>
    <input type="text" id="text1" />
    <input type="button" id="btn1" value="按钮" />
</body>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function () {
            var oBtn=document.getElementById(‘btn1‘);
            var oText=document.getElementById(‘text1‘);
            var oSelect=document.getElementById(‘select1‘);
            oBtn.onclick=function () {
                //alert(oBtn.value);
                //alert(oText.value);
                alert(oSelect.value)
            };
        };
    </script>
</head>
<body>
    <input type="text" id="text1" />
    <select id="select1">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="杭州">杭州</option>
    </select>
    <input type="button" id="btn1" value="按钮" />
</body>

时间： 2024-10-24 03:48:34

js的HTML属性操作的相关文章

JS基础之属性操作注意事项

1.js中注意问题 font-size 改成fontSize padding-top 改成paddingTop 2.js动态添加Class class 改成className 3.oInp.type = 'checkbox';IE6,7,8不支持,可以使用display进行控制 <script>var oInp = document.getElementById('inp1'); oInp.onclick = function (){ oInp.type = 'checkbox'; /*

js中html属性操作

1属性.元素(获得) <input id ="btn" type="button" value="按钮"> var btn=document.getElementById("btn"); btn.id---->btn btn.type------->button btn.value------->按钮等号左边的都可以通过上述方法获得 2属性.元素=" "(替换修改) <

js、jquery、h5 类\属性操作的笔记总结

① js操作 /var div = document.getElementById('d1'); /两种方式不能交换使用,赋值和获取值必须使用用一种方法.var div = document.getElementById("box");//元素节点.属性(元素节点[属性]):绑定的属性值不会出现在标签上,能获取.div.aaaa = "1111&

js基础之js中的HTML属性操作与注意事项

一.js中的HTML属性操作HTML属性操作:读和写: 属性读操作:作用:获取.找到: 语法:元素.属性名属性写操作:作用:替换.修改: 语法:元素.属性名 = 新的值--->就替换了. innerHTML:读取元素内的所有HTML内容: 语法:元素.innerHTML://读取HTML内容语法:元素.innerHTML = 新值://修改HTML内容 /*属性读写操作注意事项*/1.JS中不允许出现“-”例:oDiv.style.fontSize将font-size 中的“-”去掉,si

js学习笔记2---HTML属性操作

1.HTML属性操作:读.写属性名属性值 2.属性读操作:获取.找到 a) 语法:元素.属性名如:document.getElementById(“btn”).value; b) 字符串的连接: + 3.属性写操作:(“添加”)替换.修改 a) 语法:元素.属性名 = 新的值如:document.getElementById(“btn”).value = “嘛呢嘛呢哄~变变变”; 4.元素内容操作:(“添加”)替换.修改 oP.innerHTML 读取元素内的所有

js第一节-js的属性操作

js第一节-js的属性操作今天我们第一节的内容主要跟大家聊聊js的属性操作,那么什么是属性呢?属性就是对于一个事物的描述,比如一个元素它的id,它的value值等.每个元素都有其自己本有的属性,也有我们给它定义的属性--自定义属性,总之这些都是描述其元素独有特性的.现在呢,我通过两个实例跟大家讲解一下什么是js的属性操作. 一.第一个实例是:图片的轮播图效果图: 图1:加载的时候图2:加载之后 HTML代码和CSS代码: JS代码: 上面用到了var oId = document.getE

JS的属性操作（2）

1.点击下拉框选择信息 2.点击按钮,下拉框内选择的信息会自动跳转到文本输入框 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 7 <script> 8 /* 9 HTML

js switch判断三目运算 while 及属性操作

三目运算:如var a = 10: var b= 12: c = a>b ?a:b; 若成立执行a否则执行b var isHide = true; 若用if判断语句如下 if(isHide) { box.style.display = "block"; } else { box.style.display = "none"; } 三目运算替代if box.style.display = isHide?"block":"none&

JS的属性操作（1）

1.在文本框输入信息,选择城市 2.点击按钮 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 7 <script> 8 /* 9 HTML 的属性操作:读.写 10 属性名