模拟宽度:calc(100％)-使用jQuery无法正常工作 [英] simulate width: calc(100%) - with jQuery not working

问题描述

我正在使用HTML，CSS，mediaQuery，Javascript，jQuery和PrimeFaces，并且我想使用css属性

I am using HTML, CSS, mediaQuery, Javascript, jQuery and PrimeFaces, and I want to use the css property

calc(100% - 100px)

我已经为不支持此属性的旧版浏览器实现了javascript解决方案.

I've implement a javascript work around for old browsers, which do not support this property.

在阅读了一些相关问题之后，例如:

After reading several related questions, such as:

• css宽度:calc(100％-100px);使用jquery的替代方法

在DOM为就绪"时运行JavaScript函数;?

获得div完成加载后的宽度和高度

我的代码摘录:

1.)我的JavaScript函数出现在我的facelet中:

1.) my JavaScript function in my facelet:

        <ui:define name="search_results">
        <h:outputStylesheet name="primeicons/primeicons.css" library="primefaces"/>
        <h:outputStylesheet library="css" name="results.css" />
        <h:outputScript library="primefaces" name="jquery/jquery.js"/>
        <h:outputScript library="js" name="results.js"/>
        <script>
            // we need to execute the js function after the page load:
            // @see https://stackoverflow.com/questions/8996316/how-to-execute-javascript-after-page-load
            jQuery(document).ready(function() {
                jQuery(document).ready(function() {
                    // twice in document.ready to execute after Primefaces callbacks
                      document.getElementById("homeDetailsPanelId").setAttribute("style","width:583px !important;");
                      var width = document.getElementById("homeDetailsPanelId").style.width;

                      alert (width);
                });
            }); 
        </script>

2.)我所讨论元素的HTML和CSS代码:

2.) My HTML and CSS code for the element in question:

 <div id="homeDetailsPanelId" class="col-7">
 <!-- more code here -->
 </div>

3.)我的css文件:

3.) My css file:

    @media only screen and (min-width: 1200px) {

    .col-7 {
        width:calc(100% - 395px);
    }

     /* more styles here */
   }

最小工作示例:

https://github.com/alexmivonwien/pf.css

当我在任何浏览器中加载页面时，我看到javascript被执行并且元素的宽度设置正确.但是，在显示javascript alert()并确认之后，浏览器将使用媒体查询中的css并覆盖用javascript设置的元素的宽度.

When I load my page in any browser, I see that the javascript gets executed and the width of the element is set properly. However, after the javascript alert() shows up and I confirm it, the browser applies the css from the media query and the width of the element set with javascript is overwritten.

如何使JavaScript优先于CSS中的媒体查询?

How can I make my JavaScript take precedence over the media query in the CSS?

当前结果:

推荐答案

id和class的主席身份可能是一个问题.尝试在jQuery和CSS中给id提供类，例如

it might be a problem with presidency of id and class.try to give class in jquery and id in CSS like

css

    @media only screen and (min-width: 1200px) {

    #homeDetailsPanelId {
        width:calc(100% - 395px);
    }

     /* more styles here */
   }

Jquery:

   document.getElementByClassName("col-7").setAttribute("style","width:583px !important;");
                    

这篇关于模拟宽度:calc(100％)-使用jQuery无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！