草庐IT

关于 css：需要知道 jQuery 中最大宽度值是 % 还是 px

codeneng 2023-03-28 原文

Need to know in jQuery if a max-width value is in % or px

jQuery 中有一些方法可以知道 CSS 页面中定义的元素的最大宽度值是 % 还是 px，因为 jQuery 总是返回 px 中的值。

我是说……

1
2
3
.contain {
   max-width:80%;
}

jQuery -> .contain 在 %!

1
2
3
.contain {
   max-width:80px;
}

jQuery -> .contain 在 px 中！

谢谢！

1
$('.contain').css('max-width')

它会返回一个字符串，要么是"80px"要么是"80%"

然后就可以用indexOf来查找是否有"px"或者"%"

1
2
3
4
5
if ($('.contain').css('max-width').indexOf("px") !== -1) {
    //is in px
} else if ($('.contain').css('max-width').indexOf("%") !== -1) {
    //is in %
}

  • 您知道我们可以访问样式表定义的这些属性的"列表类型"的引用吗...由于此解决方案不适用于 width？这将是有用的......;)
  • 即使这在 Chrome 中有效，但在 Firefox 中无效。

奇怪的是，Louys Patrice Bessette 和 Mayday 都是对的。

Mayday 的答案是正确的...如果你在 Chrome 中测试它！ .css('width') 将在 px 中返回(即使在 % 中设置)，而 .css('max-width') 将在使用该单位时返回 %！然而，在 Firefox 中，该值始终为 px。您可以使用下面的代码对此进行测试，并在 Firefox 和 Chrome 中打开。

1
2
console.log($('div').css('max-width'));
console.log($('div').css('width'));
1
2
3
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

  Bananas

由此我们可以说 Louys Patrice Bessette 指出你不能这样做是正确的。这是真的，如果您在谈论 jQuery\\ 的 CSS 方法 - 可能还有任何类似 getComputedStyle 的方法。

不过，您可以做的是解析样式表并读取样式中写入的实际值。还有许多其他答案可以解决这个问题，所以请查看它们(您可以使用搜索功能查找更多)：

  • 在 JavaScript / jQuery 中解析 CSS
  • JavaScript 的 CSS 解析器？

或者您可以简单地将 CSS 文件作为文本文件读取，然后使用正则表达式查找您需要的值。 (但是，这可能会更慢或至少更容易出错。)

  • 如何在 JavaScript 中读取文本文件
  • 通过 JavaScript 访问 CSS 文件内容

  • 谢谢，我已将此答案添加为书签以供将来参考。 ;)
  • 哇！我可以看到我的问题真的很复杂嘿嘿嘿......我认为这是目前的方式......谢谢！

来自 jQuery .css() 页面的引用。

?The .css() method is a convenient way to get a computed style property (...)?

?Note that the computed style of an element may not be the same as the value specified for that element in a style sheet. For example, computed styles of dimensions are almost always pixels, but they can be specified as em, ex, px or % in a style sheet.?

这是一个使用最新 jQuery 版本 (3.0.0) 的测试 Fiddle。

所以...简单的答案是否定的。

  • 奇怪的是，不同浏览器的行为不同。在 Chrome 和 FF 中试试这个小提琴，例如：jsfiddle.net/w9ykz72m
  • 哇！好吧……那么下一个问题是：是否有这些可访问属性的列表？为了不丢失分数，我删除了我的答案......但问题仍然存在。
  • 我决定取消删除...因为 Bram Vanroys anwer 指的是它。对于未来的读者。

jQuerycssspanclasssectionjquery

有关关于 css：需要知道 jQuery 中最大宽度值是 % 还是 px的更多相关文章

  1. ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗？ - 2

    当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/

  2. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  3. ruby - rspec 需要 .rspec 文件中的 spec_helper - 2

    我注意到像bundler这样的项目在每个specfile中执行requirespec_helper我还注意到rspec使用选项--require，它允许您在引导rspec时要求一个文件。您还可以将其添加到.rspec文件中，因此只要您运行不带参数的rspec就会添加它。使用上述方法有什么缺点可以解释为什么像bundler这样的项目选择在每个规范文件中都需要spec_helper吗？ 最佳答案 我不在Bundler上工作，所以我不能直接谈论他们的做法。并非所有项目都checkin.rspec文件。原因是这个文件，通常按照当前的惯例，只

  4. ruby - 如何在 Lion 上安装 Xcode 4.6，需要用 RVM 升级 ruby - 2

    我实际上是在尝试使用RVM在我的OSX10.7.5上更新ruby，并在输入以下命令后:rvminstallruby我得到了以下回复:Searchingforbinaryrubies,thismighttakesometime.Checkingrequirementsforosx.Installingrequirementsforosx.Updatingsystem.......Errorrunning'requirements_osx_brew_update_systemruby-2.0.0-p247',pleaseread/Users/username/.rvm/log/138121

  5. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  6. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  7. ruby - 为什么在 ruby​​ 中创建 Rational 不需要新方法 - 2

    这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:Rubysyntaxquestion:Rational(a,b)andRational.new!(a,b)我正在阅读ruby镐书，我对创建有理数的语法感到困惑。Rational(3,4)*Rational(1,2)产生=>3/8为什么Rational不需要new方法(我还注意到例如我可以在没有new方法的情况下创建字符串)？

  8. jquery - 如何将 AJAX 变量从 jQuery 传递到他们的 Controller ？ - 2

    我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过ajax执行，并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam

  9. ruby - EventMachine - 你怎么知道你是否落后了？ - 2

    我正在研究使用EventMachine支持的twitter-streamruby​​gem来跟踪和捕获推文。我对整个事件编程有点陌生。我如何判断我在事件循环中所做的任何处理是否导致我落后？有没有简单的检查方法？ 最佳答案 您可以通过使用周期性计时器并打印出耗时来确定延迟。如果您使用的是1秒的计时器，您应该已经过了大约1秒，如果它更长，您就知道您正在减慢react器的速度。@last=Time.now.to_fEM.add_periodic_timer(1)doputs"LATENCY:#{Time.now.to_f-@last}"@

  10. ruby-on-rails - 需要帮助最大化多个相似对象中的 3 个因素并适当排序 - 2

    我需要用任何语言编写一个算法，根据3个因素对数组进行排序。我以度假村为例(如Hipmunk)。假设我想去度假。我想要最便宜的地方、最好的评论和最多的景点。但是，显然我找不到在所有3个中都排名第一的方法。Example(assumingthereare20importantattractions):ResortA:$150/night...98/100infavorablereviews...18of20attractionsResortB:$99/night...85/100infavorablereviews...12of20attractionsResortC:$120/night

随机推荐