如何取div中包含的span的value

如何取div中包含的span的value,第1张

准确的说,提取span标签中间的内容可以使用javascript实现或者使用jQuery实现

1、使用javascript实现

a、为span设置一个id,写如下js代码

var value=documentgetElementById("span的id属性")innerHTML;或

var value=documentgetElementById("span的id属性")innerText;

就可以取出下面的span标签中间的文本

innerHTML和innerText的区别再是能否识别html标签

2、使用jQuery实现

a、为span设置一个id,写如下jquery代码

$("#span的id属性")html()或者

$("#span的id属性")text()

b、不设置任何属性

$("div span")html()取出div下第一个span的内容或者

$("div span")text()取出div下所有span的内容

将这个js(jquery-getHtml-valuejs)文件引入到你的页面中,将$("#ImageButton1")html()替换成$("#ImageButton1")formhtml (),具体代码:如下

(function($) {

var oldHTML = $fnhtml;

$fnformhtml =function() {

if (argumentslength) return oldHTMLapply(this,arguments);

$("input,textarea,button", this)each(function() {

thissetAttribute('value',thisvalue);

});

$(":radio,:checkbox", this)each(function() {

if (thischecked) thissetAttribute('checked', 'checked');

else thisremoveAttribute('checked');

});

$("option", this)each(function() {

if (thisselected) thissetAttribute('selected', 'selected');

else thisremoveAttribute('selected');

});

return oldHTMLapply(this);

};

})(jQuery);

内容<input type="text" id="text" value="<span id=>e</span>"/><br/>

<input type="button" onclick="if(/<span[^>]>[^<]<\/span>/test(textvalue)){alert(textvaluematch(/<span[^>]>[^<]<\/span>/))}else{alert('匹配不到结果!')}" value="正则表达式验证" /><br/>

用jquery吧这个不复杂吧,再通过class得到下面的span,先通过id得到当前div,再得到span里面的text

(");fileName&quottext();获取TEXT

CSS的样式分为三类: 

内嵌样式:是写在Tag里面的,内嵌样式只对所有的Tag有效。 

内部样式:是写在HTML的里面的,内部样式只对所在的网页有效。 

外部样式表:如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以css为后缀的CSS文件里,然后在每个需要用到这 些样式(Styles)的网页里引用这个CSS文件。

getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式对象([object CSSStyleDeclaration]) 

currentStyle是IE浏览器的一个属性,返回的是CSS样式对象

element指JS获取的DOM对象 

elementstyle //只能获取内嵌样式 

elementcurrentStyle //IE浏览器获取非内嵌样式 

windowgetComputedStyle(element,伪类) //非IE浏览器获取非内嵌样式 

documentdefaultViewgetComputedStyle(element,伪类)//非IE浏览器获取非内嵌样式 

注:Gecko 20 (Firefox 4 / Thunderbird 33 / SeaMonkey 21) 之前,第二个参数“伪类”是必需的(如果不是伪类,设置为null),现在可以省略这个参数。

下面的html中包含两种css样式,id为tag的div是内嵌样式,而id为test的div样式为内部样式

<!doctype html>

<html lang="en">

  <head>

    <meta charset="UTF-8">

    <meta name="Generator" content="EditPlus®">

    <meta name="Author" content="Yvette Lau">

    <meta name="keywords" content="样式,内嵌,对象,属性,的是">

    <meta name="description" content="准确的说,提取span标签中间的内容可以使用javascript实现或者使用jQuery实现1、使用javascript实现 a、为span设置一个id,写如下js代码 var value=documentgetElem">

    <title>Document</title>

    <style>

      #test{

        width:500px;

        height:300px;

        background-color:#CCC;

        float:left;

      }

    </style>

  </head>

  <body>

    <div id = "test"></div>

    <div id = "tag" style = "width:500px; height:300px;background-color:pink;"></div>

  </body>

</html><script type = "text/javascript">

  windowonload = function(){

    var test = documentgetElementById("test");

    var tag = documentgetElementById("tag");

 

    //CSS样式对象:CSS2Properties{},CSSStyleDeclaration

    consolelog(teststyle); //火狐返回空对象CSS2Properties{},谷歌返回空对象CSSStyleDeclaration{} 

    consolelog(tagstyle); //返回CSS2Properties{width:"500px",height:"300px",background-color:"pink"}

    //elementstyle获取的是内嵌式的style,如果不是内嵌式,则是一个空对象

 

    consolelog(tagstylebackgroundColor);//pink

    consolelog(tagstyle['background-color']);//pink

    //获取类似background-color,border-radius,padding-left类似样式的两种写法啊

 

    consolelog(testcurrentStyle) //火狐和谷歌为Undefined,IE返回CSS对象

    consolelog(windowgetComputedStyle(test,null))//谷歌返回CSSStyleDeclaration{……} ,火狐返回CSS2Properties{……}

    consolelog(windowgetComputedStyle(test))

    //效果同上,但是在Gecko 20 (Firefox 4/Thunderbird 33/SeaMonkey 21) 之前,第二个参数“伪类”是必需的(如果不是伪类,设置为null)

 

    consolelog(testcurrentStylewidth);//500px(IE)

    consolelog(windowgetComputedStyle(test)width); //500px;

    consolelog(windowgetComputedStyle(test)['width']);//500px;

    //documentdefaultViewgetComputedStyle(element,null)[attr]/windowgetComputedStyle(element,null)[attr]   

  }

</script>

以上就是关于如何取div中包含的span的value全部的内容,包括:如何取div中包含的span的value、span标签中有一个input标签,用jquery获取span中的html内容,却获取不到在input中输入的值、正则表达式获取span中的值等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/10040372.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-04
下一篇2023-05-04

发表评论

登录后才能评论

评论列表(0条)

    保存