如何标签中的样式

如何标签中的样式,第1张

一通过修改标签属性来改变它的样式

js设置和获取标签的属性

代码如下:

jq设置和获取标签的属性

代码如下:

值得注意的是JS的windowonload方法块的内容是在JQ的$(function(){})方法块执行完成后,再执行的。

二通过修改标签的css样式来改变它的样式

看看基本的语法:

代码如下:

$("#attr")addClass("banner");//添加样式

$("#attr")removeClass("banner");//移除样式

//JQ支持连带写法,因为removeClass的返回结果也是一个Jq对象,所以Jq对象的所有方法和事件它都可以使用

$("#attr")removeClass("banner")addClass("bannerOver");

下面是一个例子,当在dd标签上单击时,将当前dd块进行高亮显示

代码如下:

人一种高级动物狗人类的朋友猫猫科动物的祖先

下面是为表格的隔行变色效果

代码如下:

odd{background:#808080;}

even{background:#ffd800;}

selected{background:#0094ff;color:#fff;}hover{background:#808080;}

代码如下:

var$trs=$("#menu_title>dd");//选择所有行$trsfilter(":odd")addClass("odd");//给奇数行添加odd样式$trsfilter(":even")addClass("even");//给偶数行添加odd样式

单击行后,让当前行高亮显示

代码如下:

//点击行,添加变色样式

$trsclick(function(e){

$(this)addClass("selected")

siblings()removeClass("selected");

})

添加鼠标移入与移出事件

代码如下:

//鼠标移入与移出

$("#menu_title>dd")hover(

function(){

$(this)addClass("hover");

},

function(){

$(this)removeClass("hover");

}

);

css方法:

1、取得第一个段落的color样式属性的值。

$("p")css("color");

2、将所有段落的字体颜色设为红色并且背景为蓝色。

$("p")css({ color: "#ff0011", background: "blue" });<html>

<head>

    <title>JQuery中如何获取样式属性的值</title>

    <script type="text/javascript" src="jqueryjs"></script>

    <style>

        top {

            background: url(Tupianjpg) no-repeat;

            width: 75px;

            height: 90px;

        }

    </style>

    <script type="text/javascript">

        $(function () {

            var url = $("divtop")css("background-image");

            alert(url);

        })

    </script>

</head>

<body>

    <div class="top"></div>

</body>

</html>

jquery可以通过修改标签属性来改变它的样式;

js设置和获取标签的属性 :

代码如下:

<script type="text/javascript">

windowonload = function () {

var attr = documentgetElementById("attr");

attrsetAttribute("style", "font-weight:bold;")

alert(attrgetAttribute("style"));

}

</script>

jq设置和获取标签的属性 :

<script src="IP/Scripts/jquery/jquery-142minjs" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

$("#attr")attr("style", "color:#ff0000");//单个属性的设置

$("#Avatar")attr({ "class": "banner", "alt": "头像", "src": "IP/avatar/a118538jpgid=11133319" });//多个属性的设置

alert($("#Avatar")attr("src")); //得到指定标签的属性

});

</script>

如果你知道div的class : $("classname")attr("id") 获得id

如果你知道div的id :$("#id")attr("class")获得class

如果都不知道,就要循环所有的div自己去判断了

var divs=$(div);

for(var i=0;i<divslength;i++)

{

//你的判断

}

获得div有什么属性 比如 data-id="a"

$("div[data-id='a']")attr("id")//获得id

$("div[data-id='a']")attr("class")//获得class

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" href="jqhovercss"><!--这里显示外链式样式-->

    <!--<style>这里显示是内嵌式样式,两种方式都可以在下面的jq代码中获取到背景定位的值

        a{ background-position: 0px 0px;}

        a:hover{ background-position: 120px -20px;}

    </style>-->

    <script src="jquery-180minjs"></script><!--这里引入jq库,你在使用的时候记住修改路径-->

    <script>

    $(function(){

        var bgPosition = $('a');

        bgPositionhover(function(){

            alert($(this)css('background-position'))

        },function(){

            alert('ok')

        });

    })

    </script>

</head>

<body>

    <a href="#">1111111111111</a>

</body>

</html>

以上就是关于如何标签中的样式全部的内容,包括:如何标签中的样式、JQuery中如何获取样式属性的值、怎样用jquery改变标签等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

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

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

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

发表评论

登录后才能评论

评论列表(0条)

    保存