jQuery改变（css）样式的多个属性以及得到和改变元素内容--Javaweb

最新推荐文章于 2023-09-05 15:52:09 发布

MC6058

最新推荐文章于 2023-09-05 15:52:09 发布

阅读量428

点赞数

CC 4.0 BY-SA版权

分类专栏： Javaweb

本文链接：https://blog.csdn.net/chenzitian6058/article/details/116863785

Javaweb 专栏收录该内容

31 篇文章

订阅专栏

本文介绍如何使用jQuery快速改变HTML元素的背景和字体颜色，并演示如何获取和修改表格单及双标签元素的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接在标签上进行修改

例如： [div style=“background: red; color: green”></div ]

jQuery样式多属性改变

以下使用 [ 代替 < , ] 代替 >

例如：改变div标签的背景颜色，字体颜色
使用 $(“div”).css({background:“yellow”, color:“red”}) 即可改变

获取改变元素内容

以下使用 [ 代替 < , ] 代替 >
对于表格单标签使用.val() 比如：[ input type=“text” id=“id1” ] , 使用 $("#id1").val(); 即可获得输入内容, 使用 $("#id1").val(“修改的内容”); 即可修改

对于双标签使用.text() 或 .html() 比如 [ div id=“id2”] 使用 $("#id2").text(); 或 $("#id2").html() 即可获得元素内容，使用 $("#id2").text(“修改后的内容”); $("#id2").html(“修改后的内容”); 即可修改内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../script/jquery-1.7.2.js"></script>
    <script>
        $(function () {
            $("#id1").blur(function () {
                // for form html, use .val() to get content （对于表格单标签，使用.val()方法获得元素内容
                $("#id1").val()

                // for double html, use .text() or .html() to get content （双标签使用.text()或.html() 获得元素内容
                // jQuery change css multi attribute （jQuery改变样式的多个属性值)
                $("#id01").css({background: "green", color: "red"}).text("this is id=id1 span element")
            })
        })
    </script>
</head>
<body>
<form autocomplete="off">
    user_name:<br/>
    <input type="text" id="id1" autocomplete="off"><span id="id01"></span>

</form>
</body>
</html>