js获取span标签的样式属性,js获取span标签的内容

发布时间：2023-12-08

js获取span标签的样式属性,js获取span标签的内容

更新：2022-11-17 10:46

本文目录一览：

  1. 在一个JSP页面中使用javascript获得标签里的内容？
  2. 急！怎么用js提取出span标签内style里的属性值
  3. [js怎么获取当前点击的div里面 span里面的值](#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 的 <style> 里面的，内部样式只对所在的网页有效。
  • 外部样式表：如果很多网页需要用到同样的样式，将样式写在一个以 .css 为后缀的 CSS 文件里，然后在每个需要用到这些样式的网页里引用这个 CSS 文件。

获取样式的方法：

  • 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），现在可以省略这个参数。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>
<script type="text/javascript">
    window.onload = function () {
        var test = document.getElementById("test");
        var tag = document.getElementById("tag");
        console.log(test.style); // 火狐返回空对象 CSS2Properties{}，谷歌返回空对象 CSSStyleDeclaration{}
        console.log(tag.style); // 返回 CSS2Properties{width:"500px",height:"300px",background-color:"pink"}
        console.log(tag.style.backgroundColor); // pink
        console.log(tag.style['background-color']); // pink
        console.log(test.currentStyle); // 火狐和谷歌为 Undefined, IE 返回 CSS 对象
        console.log(window.getComputedStyle(test, null)); // 谷歌返回 CSSStyleDeclaration{……}，火狐返回 CSS2Properties{……}
        console.log(window.getComputedStyle(test)); // 效果同上
        console.log(test.currentStyle.width); // 500px (IE)
        console.log(window.getComputedStyle(test).width); // 500px
        console.log(window.getComputedStyle(test)['width']); // 500px
    }
</script>
</body>
</html>

js怎么获取当前点击的div里面 span里面的值

<!DOCTYPE html>
<html>
<head>
    <title>获取 span 内容</title>
    <script src="jquery-3.2.1.js"></script>
</head>
<body>
<ul>
    <li>
        <div class="vt-el-inner">
            <div class="inner-logo">
                <img src="../PPIMG/001.jpg">
            </div>
            <div class="inner-title"><span>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"><span>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>
</ul>
<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>
<script>
    var span = document.getElementById("span").innerHTML;
</script>

jQuery 写法：

var span = $("#span").html();

扩展资料：

  • span 在行内定义一个区域，可以为 p 元素增加额外的结构。
  • span 标签支持 HTML 的全局属性和事件属性。
  • 可以为 span 应用 id 或 class 属性，便于对 span 应用样式。 参考资料：百度百科 span标签，百度百科 HTML

js 获取标签信息及内容

var el = document.getElementById("#ID");
el.innerText = "纯文本"; // 设置纯文本
el.innerHTML = "<span>HTML代码</span>"; // 设置 HTML 内容
el.className = "container"; // 修改类名
el.src = ""; // 如果是 img 元素
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 写法：

var category = $("#category-0").html(); // 输出结果为 “热门”

原生 JS 写法：

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

建议使用 jQuery 库来操作，毕竟方便通用。

推荐文章