Question

我需要帮助根据javascript条件更改CSS中的属性值。不确定这是否可行。所以让我解释一下......

我有一个javascript检测到浏览器＆amp;版本，并假设它工作正常。所以我有一个JS变量如下：

var browser = "IE8";

我喜欢做的是＆＃34; var browser = IE8＆＃34;然后从＆＃34; position：absolute;＆＃34 ;;更改@media打印中的.divFooter的下面样式。 ELSE改变＆＃34;位置：relative;＆＃34;

@media screen {
        div.divFooter {
            display: none;

        }

@media print {

    div.divFooter {
        display: block;
        position: absolute;   /* -- This is where I want to change the condition based on the Browser Version variable that javascript detected. */
        bottom: 0px;
        font-size: 10pt; 
        text-align: center;         
        line-height: 120%; background: white;
        font-family:Arial, Helvetica, sans-serif;
        margin-top: 2em;
    }

    table {
        page-break-after: avoid;
    }
}

提前致谢，

Answer 1

您可以使用jQuery轻松完成。使用position: relative;初始化css，然后执行

<script>
if (browser == "IE8") {
$("div.divFooter").css('position', 'absolute');
}
</script>

Answer 2

这应该相当容易，基本上你只需要在document.ready上使用CSS方法（http://api.jquery.com/css/）更改属性。

所以jQuery解决方案将是：

$(document).ready(function(){
    if (browser == "IE8"){
        $('.divFooter').css('position','absolute');
    } else {
        $('.divFooter').css('position','relative');
    }
});

您也可以使用样式对象（http://www.w3schools.com/jsref/dom_obj_style.asp）与vanilla JS一起执行此操作：

//set variable for your div (should likely be ID instead of class but no matter)
var yourDiv = document.getElementsByClassName("divFooter");

//if statement to set position
if (browser == "IE8"){
    yourDiv.style.position = "absolute";
} else {
    yourDiv.style.position = "relative";
}

Answer 3

我建议不要使用Javascript，而是使用Html条件注释：

<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

here is a more extensive article on this

您还可以使用css hack来获取此特定属性，但您的css不再有效。

CSS根据Javascript条件更改其属性

3 个答案: