js獲取span標籤的樣式屬性,js獲取span標籤的內容

本文目錄一覽：

• 1、在一個JSP頁面中使用javascript獲得標籤里的內容？
• 2、急！怎麼用js提取出span標籤內style里的屬性值
• 3、js怎麼獲取當前點擊的div裏面 span裏面的值
• 4、js獲取HTML中標籤中的內容包括
• 5、js 獲取標籤信息及內容
• 6、怎麼利用js取下面的span值，

在一個JSP頁面中使用javascript獲得標籤里的內容？

alert(data.innerHTML);

input 標籤有value屬性，值是輸入框里的內容；

span 標籤沒有value屬性，span內部的內容，用innerHTML屬性獲得

急！怎麼用js提取出span標籤內style里的屬性值

CSS的樣式分為三類： 

內嵌樣式：是寫在Tag裏面的，內嵌樣式只對所有的Tag有效。 

內部樣式：是寫在HTML的裏面的，內部樣式只對所在的網頁有效。 

外部樣式表：如果很多網頁需要用到同樣的樣式(Styles)，將樣式(Styles)寫在一個以.css為後綴的CSS文件里，然後在每個需要用到這 些樣式(Styles)的網頁里引用這個CSS文件。

getComputedStyle是一個可以獲取當前元素所有最終使用的CSS屬性值。返回的是一個CSS樣式對象([object CSSStyleDeclaration]) 

currentStyle是IE瀏覽器的一個屬性，返回的是CSS樣式對象

element指JS獲取的DOM對象 

element.style //只能獲取內嵌樣式 

element.currentStyle //IE瀏覽器獲取非內嵌樣式 

window.getComputedStyle(element,偽類) //非IE瀏覽器獲取非內嵌樣式 

document.defaultView.getComputedStyle(element,偽類)//非IE瀏覽器獲取非內嵌樣式 

註：Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之前，第二個參數「偽類」是必需的（如果不是偽類，設置為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=”描述”

    titleDocument/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”

  window.onload = function(){

    var test = document.getElementById(“test”);

    var tag = document.getElementById(“tag”);

    //CSS樣式對象:CSS2Properties{},CSSStyleDeclaration

    console.log(test.style); //火狐返回空對象CSS2Properties{}，谷歌返回空對象CSSStyleDeclaration{} 

    console.log(tag.style); //返回CSS2Properties{width:”500px”,height:”300px”,background-color:”pink”}

    //element.style獲取的是內嵌式的style，如果不是內嵌式，則是一個空對象

    console.log(tag.style.backgroundColor);//pink

    console.log(tag.style[‘background-color’]);//pink

    //獲取類似background-color,border-radius,padding-left類似樣式的兩種寫法啊

    console.log(test.currentStyle) //火狐和谷歌為Undefined,IE返回CSS對象

    console.log(window.getComputedStyle(test,null))//谷歌返回CSSStyleDeclaration{……} ，火狐返回CSS2Properties{……}

    console.log(window.getComputedStyle(test))

    //效果同上,但是在Gecko 2.0 (Firefox 4/Thunderbird 3.3/SeaMonkey 2.1) 之前,第二個參數「偽類」是必需的(如果不是偽類,設置為null)

    console.log(test.currentStyle.width);//500px(IE)

    console.log(window.getComputedStyle(test).width); //500px;

    console.log(window.getComputedStyle(test)[‘width’]);//500px;

    //document.defaultView.getComputedStyle(element,null)[attr]/window.getComputedStyle(element,null)[attr]   

  }

/script

js怎麼獲取當前點擊的div裏面 span裏面的值

!doctype html

!DOCTYPE html

html

head

title/title

/head

body

li

div class=”vt-el-inner”

div class=”inner-logo”

img src=”../PPIMG/001.jpg”

/div

div class=”inner-title”span1/span馬格全屋定製/div

div class=”inner-btn”

div class=”vote-count fl”7899票/div

button class=”vote-send fr” onclick=”asd(this)”投TA一票/button

/div

/div

/li

li

div class=”vt-el-inner”

div class=”inner-logo”

img src=”../PPIMG/002.jpg”

/div

div class=”inner-title”span2/span馬格全屋定製/div

div class=”inner-btn”

div class=”vote-count fl”789票/div

button class=”vote-send fr” onclick=”asd(this)”投ta一票/button

/div

/div

/li

script type=”text/javascript” src=”jquery-3.2.1.js”/script

script type=”text/javascript”

function asd(obj){

var ret = $(obj).parent().siblings(“.inner-title”).find(“span”).html();

console.log(ret)

}

/script

/body

/html

需要引入jquery

js獲取HTML中標籤中的內容包括

span id=”span”

span style=”color: rgb(229, 51, 51);”2132131321/span

/span

var span = document.getElementById(“span”).innerHTML;

jquery:

var span = $(“#span”).html();

擴展資料

pspansome text./spansome other text./p

如果不對 span 應用樣式，那麼 span 元素中的文本與其他文本不會任何視覺上的差異。儘管如此，上例中的 span 元素仍然為 p 元素增加了額外的結構。

span在行內定義一個區域，也就是一行內可以被span劃分成好幾個區域，從而實現某種特定效果。span本身沒有任何屬性，span 標籤支持HTML 的全局屬性和事件屬性。

可以為 span 應用 id 或 class 屬性，這樣既可以增加適當的語義，又便於對 span 應用樣式。可以對同一個 span 元素應用 class 或 id 屬性，但是更常見的情況是只應用其中一種。這兩者的主要差異是，class 用於元素組（類似的元素，或者可以理解為某一類元素），而 id 用於標識單獨的唯一的元素。

參考資料：百度百科 span標籤

百度百科 HTML

js 獲取標籤信息及內容

var el=document.getElementsById(“#ID”);

在裏面輸入純文本

el.innerText=”純文本”

在裏面你輸入HTML代碼

el.innerHTML=”spanHTML代碼/span”

修改類名

el.className=”container”

如果元素是img

el.src=””

修改鼠標懸停提示信息

el.title=”這是提示信息”

添加/修改元素屬性

el.setAttribute(“disabled”,true)

移除元素屬性

el.removeAttribute(“disabled”)

修改元素標籤名，先刪除元素，再添加

var elParent=el.parentElement;

el.remove()

var newEl=document.createElement(“script”)

newEl.src=””

elParent.appendChild(newEl)

怎麼利用js取下面的span值，

最簡單且常規的做法就是給需要用js操作的html標籤定義一個id

如span id=”category-0″熱門/span

如果是用jquery獲取span的值，則如下：

var category = $(“#category-0”).html();//category輸出結果就是 「熱門」 兩個字

如果是用js獲取span的值，則如下：

var category =document.getElementById(“category-0”).innerHTML;

建議用jquery庫來操作，畢竟方便通用