js检测css样式是否存在_检测跨浏览器CSS样式支持

js检测css样式是否存在

Differences between browsers has been the bane of web developers ever since the second web browser was released. Although the situation is much better today than it was in the late 1990's, it is still possible to get caught out by minor differences between browsers.

自第二个Web浏览器发布以来，浏览器之间的差异一直是Web开发人员的祸根。 尽管今天的情况比1990年代末要好得多，但是仍然有可能被浏览器之间的细微差别所吸引。

Initially, web developers used the 'User-Agent' string to try and determine the type of web browser and hence what it did or did not support. This method however is difficult to maintain and is not always accurate. It is not helped by the fact that some browsers let users change the User Agent string. The Opera browser, until about version 7 or 8 even went as far as making itself appear, by default, as Internet Explorer. Thankfully, they have since stopped doing this.

最初，Web开发人员使用“ User-Agent”字符串尝试确定Web浏览器的类型，从而确定其支持或不支持的功能。 然而，该方法难以维护并且并不总是准确的。 某些浏览器允许用户更改用户代理字符串的事实并没有帮助。 Opera浏览器，直到第7或第8版，甚至在默认情况下甚至以Internet Explorer出现。 值得庆幸的是，他们此后已停止这样做。

A better method was to detect if certain objects or functions where available and use their existence or otherwise to determine how a script ran.

更好的方法是检测某些对象或功能是否可用，并使用它们的存在或其他方式确定脚本的运行方式。

For example 'if (document.styleSheets) ...' will be true if the browser supports style sheets. This is a more robust method of detecting browser capabilities.

例如，如果浏览器支持样式表，则“ if（document.styleSheets）...”将为true。 这是检测浏览器功能的更可靠的方法。

However, even when a browser supports style sheets, the support is not consistent across different browsers and differences can cause problems.

但是，即使浏览器支持样式表，在不同的浏览器中，支持也不是一致的，并且差异可能会引起问题。

While writing another tutorial today, I came across a problem with differing CSS support in different browsers so I decided to see if there was a way, like the object detection, of determining if the browser displaying the supported a particular style, without resorting to using the UserAgent string

今天在写另一个教程时，我遇到了一个问题，即在不同的浏览器中对CSS的支持不同，因此我决定查看是否有一种方法（例如对象检测）来确定浏览器是否显示所支持的特定样式，而无需使用UserAgent字符串

My problem was hiding and showing table columns. The 'display:inline-table' showed the column, and  'display:none' hid the column.

我的问题是隐藏和显示表列。 “ display：inline-table”显示该列，而“ display：none”隐藏该列。

All was great until I tested in IE8. I could hide the columns but not display them.

直到我在IE8中进行测试，一切都很棒。 我可以隐藏列，但不显示它们。

'display:inline' worked in IE8, but caused problems in Opera and Firefox - when the columns where redisplayed using 'display:inline', they lost their width style, and only showed as wide as necessary to show the content.

'display：inline'在IE8中工作，但是在Opera和Firefox中引起了问题-当使用'display：inline'重新显示列时，它们失去了宽度样式，只显示了所需的宽度以显示内容。

The solution.

解决方案。

Create a dummy HTML element on the page somewhere, that won't be seen, or use an existing element, and make sure the initial style is what is should be.

在页面上某处创建一个看不见的虚拟HTML元素，或使用一个现有元素，并确保初始样式应为原样。

Then, using JQuery get a reference to the test element. Then see if the relevant style has the correct value. If not, take appropriate action.

然后，使用JQuery获得对测试元素的引用。 然后查看相关样式是否具有正确的值。 如果不是，请采取适当的措施。

(JQuery is a JavaScript library. It is "... a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.")

（JQuery是一个JavaScript库。它是“ ...一个简洁JavaScript库，可简化HTML文档的遍历，事件处理，动画和Ajax交互，以实现快速的Web开发。”）

In this example, IE reports the value of 'display' as 'block' rather than 'inline-table'

在此示例中，IE将“ display”的值报告为“ block”而不是“ inline-table”

This should be the end of it. Unfortunately, Chrome (and presumably Safari) reports 'table-cell' here initially, although this does change to 'inline-table' if the style is later changed with JavaScript.

这应该是它的结尾。 不幸的是，Chrome（可能是Safari）最初在此处报告“ table-cell”，尽管如果后来使用JavaScript更改了样式，它也会更改为“ inline-table”。

This spoils the principle a bit, but I'm going to guess here that such irregularities are quite rare and, in this case, could even be a bug in Chrome.

这有点破坏了原理，但是我想在这里猜测这种不规则现象非常罕见，在这种情况下，甚至可能是Chrome中的错误。

So, the detection code will either read

因此，检测代码将读取

if ($("#testCell").css("display") == "block")

if ($("#testCell").css("display").indexOf("table") == -1)

For a more extended example, please see my related article Hiding/displaying HTML table columns on wide tables

有关更扩展的示例，请参见我的相关文章在宽表上隐藏/显示HTML表列

<html>
<head>
	<style type="text/css">
	table td
	{
	    border:solid 1px black; 
	    border-collapse:collapse;
	    padding: 1px;
	}
	.cg1 {
		width:150px;
		display:inline-table;
	}
	
</style>
 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
    // This value is updated when the document is loaded is inline-table style is not supported
    var showStyle = "inline-table";
    function cssTest() {
        if ($("#testCell").css("display").indexOf("table") == -1) showStyle = "inline";
        alert (showStyle);
    } 
</script>
	
</head>	
<body onload="cssTest()">
	
	<table>
		<tr>
			<td class="cg1" id="testCell">Test Cell</td>
		</tr> 
	</table>
 
</body>
</html>

翻译自: https://www.experts-exchange.com/articles/1691/Detecting-cross-browser-CSS-style-support.html

js检测css样式是否存在