Я заключил из вступительного комментария, что пример использования определяет, является ли ответ HTML или JSON. В этом случае, когда вы делаете , получаете JSON, вы, вероятно, должны разбирать его и обрабатывать некорректный JSON в какой-то момент вашего кода. Помимо всего прочего, я предполагаю, что вы хотели бы получить информацию от своего браузера, если ожидается JSON, но недействительный JSON, полученный (как и пользователи по доверенности какого-либо значимого сообщения об ошибке)!
Выполнение полного регулярного выражения для JSON поэтому (как это было бы - по моему опыту - для большинства случаев использования). Вероятно, вам было бы лучше использовать что-то вроде ниже:
function (someString) {
// test string is opened with curly brace or machine bracket
if (someString.trim().search(/^(\[|\{){1}/) > -1) {
try { // it is, so now let's see if its valid JSON
var myJson = JSON.parse(someString);
// yep, we're working with valid JSON
} catch (e) {
// nope, we got what we thought was JSON, it isn't; let's handle it.
}
} else {
// nope, we're working with non-json, no need to parse it fully
}
}
, который должен сэкономить на использовании дескриптора исключений, действительный код не JSON и позаботится о duff json на одновременно.
В целях безопасности вы можете проверить, существует ли элемент, прежде чем пытаться его прочитать. Если он не существует, ваш код будет генерировать исключение, которое остановит выполнение на остальной части вашего JavaScript и потенциально отобразит сообщение об ошибке для пользователя - не хорошо. Вы хотите, чтобы уметь изящно терпеть неудачу.
var height, width, top, margin, item;
item = document.getElementById( "image_1" );
if( item ) {
height = item.style.height;
width = item.style.width;
top = item.style.top;
margin = item.style.margin;
} else {
// Fail gracefully here
}
Свойство element.style позволяет вам знать только свойства CSS, которые были определены как встроенные в этот элемент (программно или определены в атрибуте стиля элемента), вы должны получить вычисленный стиль.
Не так просто сделать это кросс-браузерным способом, IE имеет свой собственный путь, через свойство element.currentStyle и стандартный способ DOM Level 2, реализованный другими браузерами, через метод document.defaultView.getComputedStyle.
Два способа имеют различия, например, свойство элемента IE.currentStyle ожидает, что вы получите доступ к именам свойств CSS, состоящим из двух или более слов в camelCase (например, maxHeight, fontSize, backgroundColor и т. д.), стандартный способ ожидает свойства со словами, разделенными тире (например, max-height, font-size, background-color и т. д.). ......
function getStyle(el, styleProp) {
var value, defaultView = (el.ownerDocument || document).defaultView;
// W3C standard way:
if (defaultView && defaultView.getComputedStyle) {
// sanitize property name to css notation
// (hyphen separated words eg. font-Size)
styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
} else if (el.currentStyle) { // IE
// sanitize property name to camelCase
styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
return letter.toUpperCase();
});
value = el.currentStyle[styleProp];
// convert other units to pixels on IE
if (/^\d+(em|pt|%|ex)?$/i.test(value)) {
return (function(value) {
var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
el.runtimeStyle.left = el.currentStyle.left;
el.style.left = value || 0;
value = el.style.pixelLeft + "px";
el.style.left = oldLeft;
el.runtimeStyle.left = oldRsLeft;
return value;
})(value);
}
return value;
}
}
Кросс-браузерное решение без манипуляций с DOM, приведенное выше, не работает, потому что оно дает первое правило соответствия, а не последнее. Последнее правило сопоставления является тем, которое применяется. Вот рабочая версия:
function getStyleRuleValue(style, selector) {
let value = null;
for (let i = 0; i < document.styleSheets.length; i++) {
const mysheet = document.styleSheets[i];
const myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;
for (let j = 0; j < myrules.length; j++) {
if (myrules[j].selectorText &&
myrules[j].selectorText.toLowerCase() === selector) {
value = myrules[j].style[style];
}
}
}
return value;
}
Однако этот простой поиск не будет работать в случае сложных селекторов.
Вы можете использовать getComputedStyle()
.
var element = document.getElementById('image_1'),
style = window.getComputedStyle(element),
top = style.getPropertyValue('top');
jsFiddle .
Используйте следующее. Это помогло мне.
document.getElementById('image_1').offsetTop
См. Также Получить стили .
Если вы находитесь в библиотеках, почему бы не MyLibrary и getStyle .
Метод jQuery css неверен , CSS - это всего лишь один способ установки стилей и необязательно представляет фактические значения свойств стиля элемента.
Если вы установите его программно, вы можете просто называть его как переменную (т. е. document.getElementById('image_1').style.top
). В противном случае вы всегда можете использовать jQuery:
<html>
<body>
<div id="test" style="height: 100px;">Test</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
alert($("#test").css("height"));
</script>
</body>
</html>
Кросс-браузерное решение для проверки значений CSS без манипуляции с DOM:
function getStyleRuleValue(style, selector) {
for (var i = 0; i < document.styleSheets.length; i++) {
var mysheet = document.styleSheets[i];
var myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;
for (var j = 0; j < myrules.length; j++) {
if (myrules[j].selectorText && myrules[j].selectorText.toLowerCase() === selector) {
return myrules[j].style[style];
}
}
}
};
Использование:
getStyleRuleValue('backgroundColor', '.chart-color')
дезинфицированная версия (принудительно вводит ввод в строчный регистр и позволяет использовать case без ведущего ".")
function getStyleRuleValue(style, selector) {
var selector_compare=selector.toLowerCase();
var selector_compare2= selector_compare.substr(0,1)==='.' ? selector_compare.substr(1) : '.'+selector_compare;
for (var i = 0; i < document.styleSheets.length; i++) {
var mysheet = document.styleSheets[i];
var myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;
for (var j = 0; j < myrules.length; j++) {
if (myrules[j].selectorText) {
var check = myrules[j].selectorText.toLowerCase();
switch (check) {
case selector_compare :
case selector_compare2 : return myrules[j].style[style];
}
}
}
}
}