jquery的css类和css方法

最新推荐文章于 2022-10-05 11:00:19 发布

困在雨天

最新推荐文章于 2022-10-05 11:00:19 发布

阅读量187

点赞数

分类专栏： jQuery 文章标签： css jquery 前端

本文链接：https://blog.csdn.net/weixin_44106237/article/details/126355052

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

  <body>
    <div class="box" id="box"></div>
    <button id="btn">点我改变样式</button>
  </body>

// css():返回或者设置元素的样式

1、返回对象.css('css属性名')

console.log($('#box').css('width'))

console.log($('#box').css('height'))

///通过css方法返回的颜色是rgb的///

console.log($('#box').css('background-color'))

2、设置对象.css('css属性名','css属性值')

事件源（jQuery对象）.事件类型（事件的处理程序）

$('#btn').click(function () {

$('#box').css('width', '200px')

$('#box').css('height', '200px')

$('#box').css('background-color', 'blue')

$('#box').css('border', '5px solid gray')

一次性设置样式 ,参数是个对象/

$('#box').css({

width: '100px',

height: '100px',

'background-color':'pink',

'border-radius':'50%'

})

 <style>
      .sec1 {
        width: 600px;
        height: 200px;
        background-color: red;
      }
      .select {
        border: 10px solid black;
      }
      .add {
        border-radius: 50px;
      }
      button {
        width: 450px;
        height: 80px;
        font-size: 50px;
      }
      .bodyC {
        background-color: black;
      }
<body>
    <section class="sec1" id="sec">我是section</section>
    <button id="btn">点我添加类</button>
    <button id="remove">点我删除类</button>
    <button id="toggle">开/关灯</button>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li id="li4">4</li>
      <li>5</li>
      <li>6</li>
      <li id="li7">7</li>
      <li>8</li>
      <p id="p1">我是段落</p>
      <div></div>
      <header></header>
    </ul>
  </body>