Question

我正在尝试获取被覆盖的元素的CSS属性列表，例如：

//...
//...
while ($q->have_posts()) : $q->the_post();
    $buttonfinallink = '';
    $buttonlink = get_field('page_link');
    $buttonURL = get_field('custom_url');
    if ($buttonURL != '') {
        $buttonfinallink = $buttonURL;
    } else {
        $buttonfinallink = $buttonlink;
    }

    $list .= '<div class="col-md-9">
                    <h2 style="margin-bottom:0.3em;font-size:16px;">' . get_the_title() . '</h2>
                    <br /><div style="color:#ccc;font-size:14px;">' . get_field('content') . '</div>
                    <a href="' . $buttonfinallink . '" class="link" style="margin-top:0.8em; font-size:0.8em;">' . get_field('link_label') . '</a>
                </div>
                <div class="col-md-3"><img src="' . get_field('image') . '" style="max-height:75px;"></div>';

endwhile;
//...
//...

当我们使用此代码时：

.div{
  position:absolute;
  top:10px;
}

我获得：

jQuery('.div').css('bottom');

如果我使用get computed或jquery.css，我会得到相同的结果，但实际上我想得到：

bottom:-10px;

因为我没有指定/覆盖。

此示例中预期的值：上：10px bottom：auto或null或null

https://codepen.io/anon/pen/dvvdVv

同样，我只想要被覆盖的属性。

=====================编辑======================

我的目标只是从以下元素中获取值empty or null：

top,bottom

和元素的css，请注意我只指定了<div id='box' class='giveItSomeTop' style="top:10px"></div>：

top

现在我想获得最高价值和最低价值。如果我这样做：

.giveItSomeTop{
   top:10px;
}

结果是：$('#box').css('top'); 但是当我这样做时：

10px

当我得到$('#box').css('bottom');，700px，empty或＆＃39;＆＃39;

时，我得到nothing

Answer 1

你到达那里真的很棘手，我唯一的建议就是：

使用原生javascript设置顶部/底部，所以如果你设置top = 10px，你将获得element.style.top == 10px，如果你没有设置这个属性，你将得到＆＃34;＆＃34 ;

我在这里添加了一个例子，不是最好的解决方案，但也许有帮助：

＆＃13;

$( document ).ready(function() {
  var box = document.getElementById("box");
  
  // Set it like this
  var top = box.style.top = "20px";
  var bottom = box.style.bottom;
  
  // And you get 20px
  $('#top').text(top);
  
  // If unset you get ""
  $('#bottom').text(bottom);
  
  console.log(top);
});

＆＃13;

#box {
  position: absolute;
  width:30px;
  height:30px;
  background-color:red;
  top:10px;
}

p {
  position:relative;
  top:40px;
  font-size:12px;
  color:black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='box'></div>
<p id='top'></p>
<p id='bottom'></p>

＆＃13;

Answer 2

不幸的是，您没有使用jQuery All Threads方法。

https://api.jquery.com/css/

获取第一个元素的计算样式属性的值匹配元素的集合或设置一个或多个CSS属性每个匹配的元素。

这意味着，它不关心CSS文件应用于此元素的内容，它只会查找您要求它在元素上查找的内容。

你需要做什么写一个CSS文件解析器，然后从那里查询..但它是你需要实现的另一个工具/库。

StackOverflow上有这样一个工具的答案：Parsing CSS in JavaScript / jQuery

和/或：Convert CSS text to JavaScript object

从这里，您将获得一个css() | null，用于不存在的对象属性。

如何进入Javascript / jQuery只有CSS覆盖属性

2 个答案: