zoukankan      html  css  js  c++  java
  • 通过js获得html标签的值

    js获取html元素的值并赋值

    1)、input文本框
      <input type="text" value="时间" placeholder="姓名" id="input"><br>我的名字
      var t = document.getElementById("input");
    var tValue = t.value;//得到文本框的值value 没有括号
    t.value = "张三";//文本框的内容变为张三
      alert(tValue); //结果是:我的名字
       //alert($("#input").val());//jquery 得到input输入框的值
      2) 下拉列表
    <select name="city" id="city" onchange="look()">
       <option value="bj">北京</option>
    <option value="sh" selected>上海</option>
    <option value="gz">广州</option>
    <option value="sz">深圳</option>
    </select>

    function look(){
          var city = document.getElementById("city");
    var cityValue = city.value; //得到的是sh,而不是上海

    //若想得到上海
    var options = document.getElementsByTagName("option");
    for(var i = 0; i < options.length; i++){
    if(options[i].selected){
    t.value = options[i].text; // 将选中的值放在input输入框中
    alert(options[i].text); //得到上海
    alert($(options[i]).text())
    }
    }

    }
     
    3) 获得p、span、textarea、strong、a、h1-h6标签的值 都用innerHtml
    jquery用text();
    <p id="p">js获得p标签的值</p>
    <span id="span">获得span标签的值</span>
    <textarea id="textarea">textarea获得textarea标签的值</textarea>
    <h1 id="h1">h1标签</h1>
    <a href="http://baidu.com" id="a">百度</a>
    <strong id="strong">strong标签</strong>
    //var p = document.getElementsByTagName("p")[0].innerHTML; //得不到p的内容
    var p = document.getElementById("p");
    alert(p.innerHTML); //j获得p标签的值
    var span = document.getElementById("span");
    alert(span.innerHTML);
    var textarea = document.getElementById("textarea");
    alert(textarea.innerHTML);
    var strong = document.getElementById("strong");
    alert(strong.innerHTML);
    var a = document.getElementsByTagName("a");
    var a = document.getElementById("a");
    alert(a.innerHTML);
    var h1 = document.getElementById("h1");
    alert(h1.innerHTML);




  • 相关阅读:
    JSP内置对象
    Angular $scope和$rootScope事件机制之$emit、$broadcast和$on
    Ionic开发实战
    Entity Framework 5.0 Code First全面学习
    6个强大的AngularJS扩展应用
    使用npm安装一些包失败了的看过来(npm国内镜像介绍)
    自己家里搭建NAS服务器有什么好方案?
    自己动手制作CSharp编译器
    使用Visual Studio Code搭建TypeScript开发环境
    Office web app server2013详细的安装和部署
  • 原文地址:https://www.cnblogs.com/sllzhj/p/5764533.html
Copyright © 2011-2022 走看看