Как получить в Javascript/jQuery только свойства переопределения CSS

Я пытаюсь получить список переопределенных свойств CSS элемента, например:

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

Когда мы используем этот код:

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

я получаю:

bottom:-10px;

Если я использую getcomputed или jquery.css, я получу тот же результат, но на самом деле я хочу получить:

empty or null

потому что я не указал / переопределил.

Ожидаемые значения в этом примере: верх: 10 пикселей, низ: авто, ноль или ничего.

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

Опять же, мне нужны были только те свойства, которые были переопределены.

==================== РЕДАКТИРОВАТЬ =======================

Моя цель - только получить значение top,bottom из следующего элемента:

<div id='box' class='giveItSomeTop' style="top:10px"></div>

и css для элемента, обратите внимание, что я указал только top:

.giveItSomeTop{
   top:10px;
}

Теперь я хочу получить верхнее значение и нижнее значение. Если я сделаю:

$('#box').css('top');

Результат: 10px но когда я это делаю:

$('#box').css('bottom');

Я получаю 700px, когда должен получить empty, nothing, null или ''


jquery css getcomputedstyle computed-style
person Ignacio Correia    schedule 10.03.2017    source источник
comment
Вы не можете .. Когда вы запрашиваете .css(x), он не пытается проанализировать файл css... ЭТО то, что вы ищете. Если вы посмотрите на документацию, там написано Get the value of a computed style property : api.jquery.com/css вы нужно будет написать парсер файлов CSS.   -  person Pogrindis    schedule 10.03.2017
comment
Так и думал. Именно это мы и сделали. Но можно было бы и лучше :(   -  person Ignacio Correia    schedule 10.03.2017

Ответы (2)


arrow_upward
1
arrow_downward

К сожалению, вы не используете метод jQuery css() так, как он задуман.

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

Получите значение вычисляемого свойства стиля для первого элемента в наборе совпадающих элементов или задайте одно или несколько свойств CSS для каждого совпадающего элемента.

Это означает, что ему все равно, какой файл CSS применил к этому элементу, он будет искать только то, что вы попросили искать на элементе.

Что вам нужно сделать, это написать анализатор файлов CSS, а затем запросить его. Но это еще один инструмент/библиотека, которую вам нужно будет реализовать.

И для такого инструмента есть ответы на StackOverflow: Разбор CSS в JavaScript/jQuery

И/или: преобразование текста CSS в объект JavaScript

Отсюда вам будет предоставлено null|undefined для свойств объекта, которые не существуют.

person Pogrindis    schedule 10.03.2017

arrow_upward
1
arrow_downward

Это действительно сложная вещь, которую вы там получили, мои единственные предложения здесь:

Установите верх/низ с помощью собственного javascript, поэтому, если вы установите top = 10px, вы получите element.style.top == 10px, если вы не установили это свойство, вы получите «».

Я добавил пример здесь, не лучшее решение, но, возможно, это поможет:

$( 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);
});
#box {
  position: absolute;
  width:30px;
  height:30px;
  background-color:red;
  top:10px;
}

p {
  position:relative;
  top:40px;
  font-size:12px;
  color:black;
}
<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>

person Sly321    schedule 10.03.2017
comment
Я отредактировал вопрос. Ваш ответ не работает, потому что мы не контролируем настройку CSS. У нас есть 5 файлов css, которые переопределяют элементы в этом проекте. - person Ignacio Correia; 10.03.2017