jquery动态设置css样式

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。通过 jQuery，你可以方便地操作 DOM 元素，包括动态设置 CSS 样式。

类型

jQuery 设置 CSS 样式主要有以下几种方式：

直接设置单个样式：
直接设置单个样式：
设置多个样式：
设置多个样式：
获取样式值：
获取样式值：

应用场景

动态改变元素样式：例如，根据用户的交互（如点击按钮）改变元素的背景颜色、字体大小等。
响应式设计：根据窗口大小的变化动态调整元素的样式。
动画效果：结合 jQuery 的动画方法，实现平滑的样式变化。

示例代码

假设有一个按钮和一个段落元素，点击按钮时改变段落的背景颜色和字体大小：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery CSS Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="changeStyleBtn">Change Style</button>
    <p id="text">This is a paragraph.</p>

    <script>
        $(document).ready(function() {
            $('#changeStyleBtn').click(function() {
                $('#text').css({
                    'background-color': 'yellow',
                    'font-size': '20px'
                });
            });
        });
    </script>
</body>
</html>

可能遇到的问题及解决方法

jQuery 未加载：
- 问题：页面中没有正确引入 jQuery 库。
- 解决方法：确保在 HTML 文件中正确引入 jQuery 库，例如：
- 解决方法：确保在 HTML 文件中正确引入 jQuery 库，例如：

选择器错误：
- 问题：选择器无法找到目标元素。
- 解决方法：检查选择器是否正确，确保元素的 ID、类名或标签名正确无误。
样式属性拼写错误：
- 问题：CSS 属性拼写错误，导致样式无法应用。
- 解决方法：检查 CSS 属性的拼写是否正确，例如 background-color 而不是 backgroundcolor。

通过以上方法，你可以有效地使用 jQuery 动态设置 CSS 样式，并解决常见的相关问题。

页面内容是否对你有帮助？

有帮助

没帮助

为什么不显示包含JSON结果的表？

、、

还可以使用属性在表中包含一些样式，但我假设这可能需要在jQuery动态创建的表中以一种非标准的方式完成？

浏览 3提问于2014-05-18得票数 0

8回答

Webkit滚动条动态样式

、、、

我目前正在使用webkit的::-webkit-scrollbar属性设置滚动条的样式，并希望在mousemove事件上更改这些属性。问题是我似乎找不到一种方法来动态地访问滚动条的CSS。可以通过javascript (可能使用jQuery)动态地设置webkit滚动条的样式吗？

浏览 1提问于2011-03-03得票数 21

1回答

使用jQuery选择材料样式

我需要为表单设置一系列选择选项的样式，我正在寻找允许我这样做的jQuery插件。然而，当我点击输入type=“重置”时，我也需要能够重置选择框(或者仅仅选择第一个选项)。有没有人有这方面的经验？

浏览 14提问于2019-06-11得票数 0

4回答

隐藏父div，当内部没有子div时

、、、、

如果父div不包含任何子div，如何在父div上设置显示无(或添加css样式)？子div是由系统动态附加的，所以我们需要在父级上设置一个css类，如果里面没有子类。有jquery的想法吗？

浏览 10提问于2016-03-25得票数 1

回答已采纳

2回答

如何将类应用于动态生成的内容？

、、、

<ul className="list-disc list-inside"> <li>Two</li></ul> 但问题是，我有动态生成的内容

浏览 0提问于2021-10-27得票数 1

4回答

使用Javascript/jQuery从外部样式表获取CSS值

、、

如果样式引用的元素尚未生成，是否可以从页面的外部CSS获取一个值？(该元素是动态生成的)。我见过的jQuery方法是$('element').css('property');，但这依赖于页面上的element。有没有办法在CSS中找出属性的设置，而不是元素的计算样式？我是否必须做一些丑陋的事情，比如在我的页面中添加一个隐藏的元素副本，这样我才能访问它的样式属性？

浏览 67提问于2010-04-25得票数 62

回答已采纳

1回答

jQuery设置类的css宽度，但不更新jQuery启动的类更改上的宽度。

、

我计算出了使用jQuery动态设置“折叠”和“扩展”列宽度的数学方法：var PercentageWidthOfExpandedColumnCSS (背景色等)和类开关一样工作，所以我可以确定.collapsed类实际上是通过click()添加和删除的.但是jQuery设置的CSS宽度没有更新。这些列保持在文档准备就绪时jQuery最

浏览 3提问于2013-07-26得票数 0

回答已采纳

3回答

用于动态创建的元素的jQuery CSS()

、、

我正在使用jQuery CSS函数来设置一些元素的样式这是可行的，但部分元素是在页面加载后动态创建的。这应该是$(this).css(style);我被创建的事件卡住了。有什么想法吗？

浏览 0提问于2010-09-15得票数 17

回答已采纳

2回答

如何设置已动态添加到页面的元素的高度？

、、

我需要设置容器的高度，它通过jquery函数添加到DOM/页面。我尝试过使用样式表，但它只是忽略了它，并动态地设置了一个比内容小的高度。我试过$(element).css('height',470)和$(element).css('height','470px')，但这两种都不起作用。

浏览 6提问于2014-01-15得票数 1

回答已采纳

3回答

在jQuery中动态定义具有特定样式的类

、、

是否可以使用jQuery动态定义具有特定样式属性的类，而不是使用该类设置所有元素的样式？一旦创建了所有元素，我就可以在脚本的末尾设置类的属性，但这是最好的方法吗？如果我在脚本的开头用$('.class').css('property','value');定义类的样式，那么什么都不会发生，因为.class类的元素还没有被创建，对吧？

浏览 2提问于2010-04-25得票数 4

回答已采纳

1回答

在Safari中动态设置宽度-高度-左侧顶部

、、

我试图用jQuery或内联css来设置动态生成元素的大小和位置，但是Safari只是不使用它。以下是jQuery的示例： $("#e"+i).css("width", var1).css("height", var1).css("left", varcleft+'px').css("top",-(varleft&#x

浏览 2提问于2013-08-17得票数 2

2回答

jQuery mobile:插入新元素的样式不正确

、、

在页面中插入新的jQuery移动元素时，即使在包含元素上使用.trigger("create");时，它们的样式也不正确。然而，这确实在一定程度上设置了正确的样式，但还不够。除了在自定义样式表中强制样式之外，有没有人知道解决这个问题的方法？

浏览 0提问于2012-07-08得票数 1

回答已采纳

1回答

jQuery -插入内联CSS或创建CSS类并添加

、、

我有一个问题要问jQuery专家。我正在试着设置一个空白处-在一个滑块的滑动div上。DOM遍历和CSS呈现是否更快：或创建一个新的css类并将其插入.addClass('marginLeftClass')

浏览 2提问于2011-11-19得票数 1

回答已采纳

5回答

从Jquery动态改变css类属性？

、、

我在我的项目中有一个情况，在css中我有一个类#version_mobile.hidden在js中，我正在这样做(我猜想我的选择器是坏的?)如何使用这个动态创建的值为这个类添加“正确”属性？

浏览 0提问于2013-09-12得票数 0

1回答

仅使用css将innerHTML设置为标题属性

、、、

我想要设置标题属性，无论innerHTML文本在一个范围内。我知道我们可以根据title属性来设置css样式。但是不知道如何只使用CSS将innerHTML设置为标题。它的动态控制，我不

浏览 3提问于2017-02-06得票数 0

3回答

使用css将链接href添加到元素

、

是否可以使用CSS将<a href="">链接添加到HTML元素。因为我有一个图像，我想添加一个链接到一个特定的页面。有人能帮我做这件事吗？

浏览 0提问于2013-06-04得票数 16

回答已采纳

1回答

CSS -从样式块扩展样式表样式

、

我需要为某些元素实现基于用户角色或组标识的动态css样式。我的想法是从数据库中获取所需的动态值(十六进制颜色、背景图像urls)，将它们写入页面，然后使用jQuery将这些值的样式添加到要动态的元素中。看起来很简单。有人这样做过吗？另一种方法是用标头样式块中定义的样式覆盖外部样式表样式。这个能行吗？您能在样式块和外部工作表之间共享css样式吗？共

浏览 2提问于2016-03-03得票数 0

回答已采纳

1回答