专栏首页米扑专栏JS和JQuery获取label的值

JS和JQuery获取label的值

label

<label name="label_blog" id="label_blog" value="http://blog.ithomer.net">
	http://blog.ithomer.net
</label>
</br>
<input name="input_blog" id="input_blog" value="http://blog.ithomer.net">
</input>

label 获取值:

label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值

// input get value
var input = document.getElementById("input_blog");
var value = input.value;						// "http://blog.ithomer.net"
var value2 = $("#input_blog").val();			// "http://blog.ithomer.net"

// error label get value
var label = document.getElementById("label_blog");
var value = label.value;						// undefined
var value2 = $("#label_blog").val();			// ""

1)JS 正确获取:

// js label get value
var label = document.getElementById("label_blog");
var value = label.innerText.trim();				// "http://blog.ithomer.net"

2)JQuery 正确获取:

// jquery label get value
var value = $("#label_blog").html().trim();		// "http://blog.ithomer.net"

label 赋值:

// set label value
var label = document.getElementById("label_blog");
label.innerText="http://proxy.ithomer.net";				// js set value
$("#label_blog").html("http://proxy.ithomer.net");		// jquery set value

input 赋值:

// set input value
var input = document.getElementById("input_blog");
input.value="http://proxy.ithomer.net";					// js set value
$("#input_blog").val("http://proxy.ithomer.net");		// jquery set value

完整测试代码:

<!DOCTYPE html>
<html>
<head>
	<title>demo of label value</title>
</head>

<body>
	<label name="label_blog" id="label_blog" value="http://blog.ithomer.net">
		http://blog.ithomer.net
	</label>
	</br>
	<input name="input_blog" id="input_blog" value="http://blog.ithomer.net">
	</input>
<!--
	<label name="label_blog" id="label_blog"  style="display:none;" value="http://blog.ithomer.net">
		http://blog.ithomer.net
	</label>
-->	

	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
	<script type="text/javascript">
		// input get value
		var input = document.getElementById("input_blog");
		var value = input.value;						// "http://blog.ithomer.net"
		var value2 = $("#input_blog").val();			// "http://blog.ithomer.net"

		// error label get value
		var label = document.getElementById("label_blog");
		var value = label.value;						// undefined
		var value2 = $("#label_blog").val();			// ""

		// js label get value
		var label = document.getElementById("label_blog");
		var value = label.innerText.trim();				// "http://blog.ithomer.net"

		// jquery label get value
		var value = $("#label_blog").html().trim();		// "http://blog.ithomer.net"


		// set input value
		var input = document.getElementById("input_blog");
		input.value="http://proxy.ithomer.net";					// js set value
		$("#input_blog").val("http://proxy.ithomer.net");		// jquery set value

		// set label value
		var label = document.getElementById("label_blog");
		label.innerText="http://proxy.ithomer.net";				// js set value
		$("#label_blog").html("http://proxy.ithomer.net");		// jquery set value

	</script>
</body>

</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • QT 文件读写操作

    //IO_Translate用来读windows文件,linux下的回车换行是/n,windows下是/r/n 

    阳光岛主
  • Django 介绍

    Django,是一个开放源代码的Web应用框架,由Python写成,采用了MVC的软件设计模式,即模型M,视图V,控制器C。它最初是被开发来用于管理劳伦斯出版集...

    阳光岛主
  • 【leetcode】Plus One

    Given a number represented as an array of digits, plus one to the number.

    阳光岛主
  • 表格内,设置许多元素的大小时,js的速度慢的办法

    思路1:设置td为relative,input为absolute,然后设置input大小为td的大小。

    申君健
  • LeetCode中级算法-排序和搜索(1)

    给定一个包含红色、白色和蓝色,一共 n 个元素的数组,原地对它们进行排序,使得相同颜色的元素相邻,并按照红色、白色、蓝色顺序排列。此题中,我们使用整数 0、 1...

    码农帮派
  • Qt音视频开发3-vlc录像存储

    录像功能是视频监控系统的常用功能,就是将打开的视频流或者视频文件重新保存成MP4文件,当然也可以保存成其他格式,一般默认用MP4比较好,比较标准一些,MP4格式...

    feiyangqingyun
  • python input函数

    DrawSky
  • 对HTML-input的一些思考和理解

    原文链接:https://yunxiaomeng.blog.csdn.net/article/details/107575226

    winty
  • Python区分raw_input()与

    raw_input()与input()均是 python 的内建函数,通过读取控制台的输入与用户实现交互。

    py3study
  • Chrome 插件编写-用几行js代码实现写入剪贴板功能

    我们的原理是,创建一个input元素,将要写入的内容放入input里,然后选择input,再调用浏览器的复制命令,将input里的内容复制,最后隐藏input。

    小蓝枣

扫码关注云+社区

领取腾讯云代金券