正文 

当前位置： 首页 > 源码 >

jquery - 获取尚未应用的类的 CSS 属性值

     2023-03-06     240

关键词：

【中文标题】jquery - 获取尚未应用的类的 CSS 属性值【英文标题】：jquery -Get CSS properties values for a not yet applied class 【发布时间】：2012-06-13 02:30:40 【问题描述】：

我在这里问过同样的question（无法评论它，也许没有特权），我想获取样式表中定义但尚未应用于 dom 中的任何元素的 css 宽度值，（它的引导程序带有响应式媒体查询的网格的 CSS）

 .span6 
 width: 570px;

但是上面引用的问题中提供的解决方案返回 0，即像这样

$('<div/>').addClass('span6').width();

但是如果我做这样的事情就可以了

 $('<div/>').addClass('span6').hide().appendTo('body').width();

不附加该 div 的任何简单方法？

【问题讨论】：

如果你真的（真的）想避免插入元素，你可以用你需要的宽度制作一个地图：p 你为什么要这样做？也许有另一种/更简单的方法来解决您的问题？ 上次我看到一个“使用 jquery 获取样式属性”的问题，它以一些正则表达式作为接受的答案，我猜你当前的解决方案很简单。您可以在获得所需的 CSS 属性值后调用 .remove() 来清理 DOM，或者始终使用 display:none 元素来应用 CSS 并获取值，然后删除应用的 CSS 类。 @MoinZaman 我想在决定是否添加特定类之前进行一些操作，div 中有一个图像，它的宽度可以是任何东西 Get CSS properties values for a not yet applied class 的可能副本 - 我是原始“错误”答案的作者，该答案已更新为更多信息。 【参考方案1】：

为了从不存在的元素中读取 CSS 属性值，您需要将该元素（作为隐藏元素）动态插入 DOM，读取该属性并最终将其移除：

var getCSS = function (prop, fromClass) 

    var $inspector = $("<div>").css('display', 'none').addClass(fromClass);
    $("body").append($inspector); // add to DOM, in order to read the CSS property
    try 
        return $inspector.css(prop);
     finally 
        $inspector.remove(); // and remove from DOM
    
;

jsFiddle here

【讨论】：

这基本上就是 OP 正在做的事情 - .css('display', 'none') 与 .hide() 几乎相同，但 +1 用于将其扩展为可用功能和 finally 块在 @ 之后运行987654327@. 可能是使用“少写多做 jquery”的唯一简单方法：P 我已经为background-position 尝试过，但它返回的是0% 0% 而不是实际值... @AlexFilipovici 你应该做错了什么。你可以在这里看到效果很好。 jsfiddle.net/cVfFc/1【参考方案2】：

何塞的回答很好。我对其进行了修改以帮助处理更复杂的 CSS 选择器。

var getCSS2 = function (prop, fromClass, $sibling) 

    var $inspector = $("<div>").css('display', 'none').addClass(fromClass);
    if($sibling != null)
        $sibling.after($inspector); //append after sibling in order to have exact 
     else 
        $("body").append($inspector); // add to DOM, in order to read the CSS property
    
    try 
        return $inspector.css(prop);
     finally 
        $inspector.remove(); // and remove from DOM
    
;

JSFiddle

【讨论】：

typescript中的类

...继承一个父类，这和接口有别3类的修饰符请注意子类要获取父类的私有属性，要用super调用父类方法间接获取（用this关键字调用从父类继承下来的方法同样有效，前提是用this调用的这个父类方法没有被子类重写覆盖掉）4类中的... 查看详情

jQuery - 从类的元素中获取属性值的列表

】jQuery-从类的元素中获取属性值的列表【英文标题】：jQuery-getalistofvaluesofanattributefromelementsofaclass【发布时间】：2011-02-1418:58:35【问题描述】：我有一个类.object，它有一个名为level的属性。我想在页面上获取level的所有不同值的... 查看详情

重用来自 jquery-ui 框架类的 css 属性？

】重用来自jquery-ui框架类的css属性？【英文标题】：Reusecsspropertiesfromjquery-uiframeworkclasses?【发布时间】：2012-08-2410:52:21【问题描述】：jQueryUI提供方便的css框架：http://jqueryui.com/docs/Theming/API只需使用jQueryUI的CSS类（ui-widget-content、... 查看详情

从 firebase 获取数据：lateinit 属性 currentUser 尚未初始化

】从firebase获取数据：lateinit属性currentUser尚未初始化【英文标题】：Getdatafromfirebase:lateinitpropertycurrentUserhasnotbeeninitialized【发布时间】：2022-01-1004:45:32【问题描述】：我正在尝试从Firebase获取数据并根据该信息做一些事情，但在... 查看详情

day30：类的抽象类的组合应用

一、抽象类1、什么是抽象类抽象类是一个特殊的类，它的特殊之处在于只能被继承，不能被实例化。2、为什么要有抽象类如果说类是从一堆对象中抽取相同的内容而来的，那么抽象类就是从一堆类中抽取相同的内容而来的，内... 查看详情

day18：类的抽象类的组合应用

一、抽象类1、什么是抽象类抽象类是一个特殊的类，它的特殊之处在于只能被继承，不能被实例化。2、为什么要有抽象类如果说类是从一堆对象中抽取相同的内容而来的，那么抽象类就是从一堆类中抽取相同的内容而来的，内... 查看详情

day30：类的抽象类的组合应用

一、抽象类1、什么是抽象类抽象类是一个特殊的类，它的特殊之处在于只能被继承，不能被实例化。2、为什么要有抽象类如果说类是从一堆对象中抽取相同的内容而来的，那么抽象类就是从一堆类中抽取相同的内容而来的，内... 查看详情

从jquery属性选择器的结果中删除由jquery属性选择器定义的类(代码片段)

基本问题，我只想针对以指定字符串结尾的类的所有元素上以指定字符串结尾的所有类，并删除这些类。此代码不起作用，但它接近我想要的：$('[class$="_active"]').removeClass($('[class$="_active"]'))$（'[class$=“_active”]'）返回一个jQuery.f... 查看详情

jquery-获取并设置css

jQuery拥有若干进行CSS操作的方法：addClass()-向被选元素添加一个或多个类removeClass()-从被选元素删除一个或多个类toggleClass()-对被选元素进行添加/删除类的切换操作css()-设置或返回样式属性  addClass()  向被选元素添... 查看详情

获取另一个类的非静态属性

】获取另一个类的非静态属性【英文标题】：Getnonstaticattributeofanotherclass【发布时间】：2015-12-1205:33:48【问题描述】：所以我有一个具有int属性的类不能是静态的：publicclassGetterIdintid=42;publicintgetId()returnid;publicvoidsetId(intid)this.id=id... 查看详情

jquery-获取并设置css类

通过jQuery，可以很容易地对CSS元素进行操作。 jQuery操作CSSjQuery拥有若干进行CSS操作的方法。我们将学习下面这些：addClass()-向被选元素添加一个或多个类removeClass()-从被选元素删除一个或多个类toggleClass()-对被选元素进行添加... 查看详情

如何在其构造函数中获取使用依赖注入的类的实例

】如何在其构造函数中获取使用依赖注入的类的实例【英文标题】：Howtogetinstanceofclassthatusesdependencyinjectioninitsconstructor【发布时间】：2020-12-3013:05:32【问题描述】：好的，所以标题可能不是最好的，但我在这里。所以我的Vaadin应... 查看详情

获取应用于元素的 CSS 类的背景颜色

】获取应用于元素的CSS类的背景颜色【英文标题】：getbackgroundcolorofacssclassappliedtoanelement【发布时间】：2012-12-0810:35:23【问题描述】：说，我有以下CSS类：.upComingbackground:#ccc;font-weight:bold;在我的HTML中，我有一个表格，其中一些行... 查看详情

如何在jquery中获取表单的类计数？

】如何在jquery中获取表单的类计数？【英文标题】：Howtogetclasscountonforminjquery?【发布时间】：2013-11-0113:40:26【问题描述】：如何获取视图中错误类的计数？我正在添加带有一些跨度和输入控件的.error类。但没有必要在表单加载或... 查看详情

使用jquery获取css的top和left属性

             使用jquery获取css的top和left属性因为left和top也都是普通的css属性所以可以使用如下代码来获取 varleft=$(‘#test‘).css(‘left‘);vartop=$(‘#test‘).css(‘top‘ 查看详情

将装饰器应用于访问类属性的类方法

】将装饰器应用于访问类属性的类方法【英文标题】：Applydecoratortoclassmethodwhichaccessesclassattribute【发布时间】：2020-05-1408:22:27【问题描述】：是否可以编写一个作用于类方法并使用类属性的装饰器？例如，我想为函数添加一个装... 查看详情

如何使用 jQuery 获取 CSS 属性的数字部分？

】如何使用jQuery获取CSS属性的数字部分？【英文标题】：HowtogetjustnumericpartofCSSpropertywithjQuery?【发布时间】：2010-11-0904:29:33【问题描述】：我需要根据CSS属性进行数值计算。但是，当我使用它来获取信息时：$(this).css(\'marginBottom\'... 查看详情

如何在尚未在 DOM 中的元素上使用 jQuery 设置数据属性？

】如何在尚未在DOM中的元素上使用jQuery设置数据属性？【英文标题】：HowtosetdataattributewithjQueryonelementthatisnotinDOMyet?【发布时间】：2014-04-2304:17:16【问题描述】：如何使用jQuery为尚未在DOM中的元素设置数据属性？代码：varpanelHeadin... 查看详情