У меня есть класс .hello
в css:
<style>
.hello { color:#ccc }
</style>
Как использовать JQuery для проверки класса .hello
в стиле или нет?
Конечно, нужно проверить весь стиль даже в документе <link href='style.css' />
.
У меня есть класс .hello
в css:
<style>
.hello { color:#ccc }
</style>
Как использовать JQuery для проверки класса .hello
в стиле или нет?
Конечно, нужно проверить весь стиль даже в документе <link href='style.css' />
.
Далее будет проверяться, применяются ли некоторые стили к элементу (не совсем подтверждает, что он пришел из таблицы стилей)
if ($('.hello').css('color') == '#CCC') {
// true
} else {
// false
}
Сначала укажите внешний файл, в котором вы хотите выполнить поиск в существующем классе, затем попытайтесь заменить пробелы на "", если найдена строка "gap" больше 0, тогда класс "gap" найден.
(function($){
jQuery.get('assets/css/main.css', function(data) {
var str = data.replace('n','');
if(str.match(/gap/g).length>0) {
console.log('class was found!');
}else{
console.log('no class!');
}
});
}) (jQuery);
Вы можете использовать getComputedStyle()
для элемента, чтобы получить стили.
Цвет получается как rgba и преобразуется в гекс с логикой здесь
$('.hello').each((i, el) => {
if (rgb2hex(getComputedStyle(el).color) == "#cccccc") {
console.log('#cccccc el => ', el);
}
});
function rgb2hex(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
function hex(x) {
let hexDigits = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f");
return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
}
.hello {
color: #cccccc;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div class="hello">
hello
</div>
<div class="hi">
hi
</div>
См. ниже фрагмент кода, функция возвращает найденный класс или идентификатор из таблицы стилей или тега стиля, который мы передаем. И возвращает пустую строку, если она не найдена.
<script type="text/javascript">
function getDefinedCss(s){
if(!document.styleSheets) return '';
if(typeof s== 'string') s= RegExp('\\b'+s+'\\b','i'); // IE
capitalizes html selectors
var A, S, DS= document.styleSheets, n= DS.length, SA= [];
while(n){
S= DS[--n];
A= (S.rules)? S.rules: S.cssRules;
for(var i= 0, L= A.length; i<L; i++){
tem= A[i].selectorText? [A[i].selectorText,
A[i].style.cssText]: [A[i]+''];
if(s.test(tem[0])) SA[SA.length]= tem;
}
}
return SA.join('\n\n');
}
console.log(getDefinedCss ('ui-helper-hidden'));
</script>
Сообщите мне, если это сработает для вас.