jquery控制css样式

最新推荐文章于 2023-02-01 00:18:56 发布
最新推荐文章于 2023-02-01 00:18:56 发布
阅读量703 收藏
点赞数
分类专栏： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhs954838550/article/details/8821512
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            background-image:url(image1/9.jpg);
            }
    p
    {
        background-color:#eee;
        font-size:30px;
       
        }
        .pclass
        {
            font-weight:bold;
            font-family:楷体,Arial;
           
            }
            .pcolorclass
            {
               
                color:Red;
                }
                .psanclass
                {
                    background-color:Blue;
                    }
                    .backpic
                    {
                        background-image:url(image1/8.jpg);
                        }
    </style>
    <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#btnclass').click(function () {
                $('p').css('background-color', 'blue');
            })
            $('#btnAdd').click(function () {
                $('p').addClass('pclass pcolorclass psanclass'); //添加样式，字体都按新的样式改变,可以添加多个样式，以空格区别
            })
            $('#btnremove').click(function () {
                //$('p').removeClass(''); //删除样式,添加的新样式都删掉，一开始设置的样式删不了
                //$('p').removeClass('psanclass');可以指定删除的样式
            })
            $('#btntihuan').click(function () {
                $('p').toggleClass('pcolorclass'); //添加样式，字体都按新的样式改变,可以添加多个样式，以空格区别
            })

            //----------------------------------------------------------------
            //$('#btnUpdate').click(function () {
            //var numb = Math.random();
            //var numb1 = Math.floor(numb * 15 + 1);
            //$('img').attr('src', 'image1/' + numb1 + '.jpg'); //随机改图片
            //})

            //$('#btntihuanpic').click(function () {
            //$('body').toggleClass('backpic');
            //})
            $('#btntihuanpic').click(function () {
            var numb = Math.random();
            var numb1 = Math.floor(numb * 15 + 1);
            $('body').css('background-image', 'url(image1/' + numb1 + '.jpg)');
            })
        })
    </script>
</head>
<body>
<p class="pclass">Hello World:你好!</p>
<input type="button" id="btnclass"  value="设置样式" />
<input type="button" id="btnAdd" value="添加样式" />
<input type="button" id="btnremove" value="删除样式" />
<input type="button" id="btntihuan" value="替换样式" />
<input type="button" id="btntihuanpic" value="替换背景图片" />
</body>
</html>

成长的小码农
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jQuery操作css方法
qi341500的博客
10-05 1万+
一、jQuery可以使用css方法来修改元素样式 二、设置类的样式方法 1.添加类 2.移除类 3.切换类 三、类操作与className区别 四、显示隐藏效果 1、显示语法 2、隐藏语法 3、切换语法 五、滑动效果 1、上滑效果语法 2、下滑效果语法 3、滑动切换效果语法 4、事件切换 六、动画队列及其停止排队方法 1、动画或效果队列 2、停止排队 七、淡入淡出效果 1、淡入效果语法 2、淡出效果语法 3、淡入淡出切换效果语法 4、渐进方式调整到指定的不透明度
jquery操作css
集电极
09-04 279
jquery操作css
jQuery操作CSS
MX22724的博客
02-01 343
jQuery操作CSS
jQuery操作css
weixin_45802907的博客
05-06 468
操作css 一、参数只写属性名，则是返回属性值 $(this).css('color'); 二、参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加逗号，如果是数字可以不写单位和引号 $(this).css('backgroundColor','pink'); 三、参书可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号。 $('div').css({ width: '200px',
jquery控制css的display(控制元素的显示与隐藏)
weixin_34302561的博客
08-02 465
使用jquery真的很方便，比如要控制div的显示与隐藏，一句话就搞定了，请看下面使用说明。 $("#id").show()表示display:block, $("#id").hide()表示display:none; $("#id").toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。 ...
jquery动态改变css
Mr.yang
03-31 1794
jquery动态改变div的css属性，实现如图的效果 未点击之前 点击了第一个tab之后变成这样的样子 1.html代码 信息情感意识 信息科学知识 信息处理能力 信息伦理道德 2.css代码 .flex-container{ display: flex; flex-direction: row; flex-wrap: wrap;
JQuery中操作Css样式
diehe5608的博客
09-07 601
//1、获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr("class","divClass")设置Id为two的class属性。 //2、追加样式 $("#two").addClass("divClass2")为ID为two的对象追加样式divClass2 //3、移除样式...
jQuery学习笔记：CSS
weixin_33957648的博客
11-01 92
一、CSS1、css(name)访问第一个匹配元素的样式属性。返回值 String参数 name (String) : 要访问的属性名称示例：$("p").css("color"); //取得第一个段落的color样式属性的值2、css(properties)把一个“名/值对”对象设置为所有匹配元素的样式属性。这是一种在所有匹配的元素上设置大量样式属性的最佳方式。返回值 jQuery参数 prop...
JQuery控制CSS样式
qizhichao110的专栏
04-16 841
JQuery控制CSS样式             .divDefult{width:260px;font-size:10pt;padding:5px}     .divClick{width:260px;border:solid 1px #666;font-size:10pt;background-color:#eee;padding:5px}
jquery的设置多个 CSS 属性
热门推荐
u010865136的专栏
08-31 3万+
一、获取css属性 $("p").css("background-color"); 二、设置单个css属性 $("p").css("background-color","yellow"); 三、设置多个csss属性 $("p").css({"background-color":"yellow","font-size":"200%"});
jQuery操作CSS样式的方法
YYxiaobao0726的博客
03-05 2755
jQuery操作CSS样式的方法总共有四种，很简单，建议使用下面的第三种方法。 上代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=devic
使用jquery设置CSS样式
青柠晶晶的博客
12-17 8063
一.使用css()方法获取和设置css样式 1.使用css()方法获取css属性的语法如下：    值=css(属性名); 2.使用css()方法设置css属性的语法如下： 一个属性：css(属性名，值); 多个属性：css({属性名1：值1，属性名2：值2}) 示例：使用css()方法设置css属性。 &lt;html&gt; &lt;head&gt; &lt;meta char...
JQuery的CSS操作21
qq_41880978的博客
09-28 307
1.逐个设置 $(‘div’).css(‘width’，’ 100px ‘); $(‘div’).css(‘height’，’ 100px ‘); $(‘div’).css(‘background’，’ red’); 2.链式设置( 超过3个不建议使用) $(‘div’).css(‘width’，’ 100px ‘).css(‘height’，’ 100px ‘).css(‘background...
用jQuery设置元素的css样式
Qyingya的博客
05-18 2071
什么是jQuery ，jQuery 是能用少量的代码写出JavaScript的效果。 学习jQuery 要有一定的JavaScript.CSS.HTML的基础； jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。 可以通过下面的标记把 jQuery 添加到网页中： 接下来就是主要说的用jQuery 设置元素的CSS样式， 下面是HTML； 转存失败重新上传取消 什么是jQuery 选择器，下面的W3School有较详细的介绍： 转.
jquery控制css
xiaoleili的专栏
03-18 602
使用jquery真的很方便，比如要控制div的显示与隐藏，一句话就搞定了，请看下面使用说明。   $("#id").show()表示display:block,   $("#id").hide()表示display:none;   $("#id").toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。      $("#id").css('
jquery设置css样式、style属性 示例
u013521540的博客
12-01 3837
[size=medium]css虽然会在一开始我们就定义好了，但是有很多场景需要我们动态设置css，或者单独修改一个dom控件的style属性，今天分享一下我总结的jquery设置css及style样式的方法。 一、CSS 1、css(name) 访问第一个匹配元素的样式属性。 返回值 String 参数 name (String) : 要访问的属性名称 示例： $(...
jQuery——jQuery控制css和HTML
ShiZaolin的博客
02-20 248
jQuery控制CSS <head> <script type="text/javascript" src="./js/jquery-3.3.1.js"><script> <script type="text/javascript"> $(function(){ //给按钮添加点击事件 $('#btn').click(function(){ //前面...
jquery 控制css样式 旋转动画
最新发布
03-02
可以使用jQuery的css()方法和animate()方法来控制CSS样式旋转动画。首先，使用css()方法将要旋转的元素设置为绝对定位，然后使用animate()方法来改变元素的transform属性，从而达到旋转的效果。例如： HTML代码： ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值