改變使用JQuery

爲了根據窗口尺寸改變股利寬度的div寬度，我一派並用下面的JQuery腳本（來自計算器帖組合回答）嘗試：改變使用JQuery

JQuery的腳本：

<script> 
function checkWindowSize() { 
    if ($(window).width() > 1800) { 
     $('#divwidth').addClass('large'); 
    } 
    else { 
     $('#divwidth').removeClass('large'); 
    } 
} 
$(window).resize(checkWindowSize);  
</script>

的CssClass：

#divwidth{ 
    width: 1200px; 
} 
#divwidth .large{ 
    width: 2200px; 
}

下面是使用類我的HTML：

<div style="text-align: left; margin-left:auto;margin-right:auto; overflow-x:auto;" ID="divwidth"> 

<!-- my gridview here --> 
</div>

它似乎沒有工作來設置Div寬度。改變給腳本類型「文本/ Javascript」也沒有幫助。

來源

2016-01-21 Alex

我相信這是另一個[CSS特性]（https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity）問題。 – Draco18s

@ Draco18s thx我已添加css標記 – Alex

我也鏈接了該頁面，因爲該頁面可能會幫助您自行解決問題。 '＃divwidth'比'.large'更具體，所以'.large'被忽略。 – Draco18s

您在使用@ kpucha's anwer遇到的問題是您的實施了他的建議錯誤地。在yor CSS仍然有一個空白（''）改變CSS的含義。您的代碼是：

#divwidth .large{ 
    width: 2200px; 
}

，它應該是：

#divwidth.large{ 
    width: 2200px; 
}

不同的是，你的規則適用於後代的#divwidth與類large。相反，它應該適用於#divwidth元素也有類large。

的最好方式不過是一個CSS媒體查詢像這樣：

#divwidth { 
    width: 1200px; 
} 
@media (min-width:1800px) { 
    #divwidth { 
     width: 2200px; 
    } 
}

這將導致div在width是1200px當viewport比1800px小。

來源

2016-01-21 21:09:29

確實沒有看到空白-_- – kpucha

謝謝！使用Css媒體查詢確實可以快速解決問題 – Alex

我不認爲你需要這個jQuery。你可以在此的jsfiddle設置你的寬度百分比像https://jsfiddle.net/n3gw5613/

.divWidth { 
    float:left; 
    width:50%; 
    margin:0 25%; 
    padding:15px; 
    background:#aa0000; 
    color#000; 
}

或本的jsfiddle使用媒體查詢像https://jsfiddle.net/90jaxah9/1/

.divWidth { 
    float:left; 
    width:350px; 
    margin:0 25%; 
    padding:15px; 
    background:#aa0000; 
    color#000; 
} 
@media only screen and (max-width:320px) { 
    .divWidth { 
     width:100px; 
     margin:0; 
    } 
}

拖動和調整您的瀏覽器中看到的變化

來源

2016-01-21 19:02:31 badsyntax

當我將寬度從一個固定數字更改爲％時，它會擴展，因爲我擁有的gridview比頁面的寬度更長。 – Alex

如何在秒示例中的CSS媒體查詢？ – badsyntax

當我嘗試使用我的代碼時，CSS媒體查詢無法正常工作。然而，它試圖與伊萬的代碼後，我知道它會適用於你的第二個答案。希望我可以接受這兩個答案 – Alex

你有CSS選擇器的問題。

你有這樣的：

.large #divwidth{ 
    width: 2200px; 
}

你是說你想用id divwidth中的元素與一流的大型

元素你需要這樣的：

#divwidth.large{ 
    width: 2200px; 
}

這你說的方式你想要的ID與divwidth的元素和類大

來源

2016-01-21 19:17:07 kpucha

我更新了我的代碼（以及這裏的帖子），並且沒有任何更改 – Alex

看這裏https://jsfiddle.net/tv0gLaLb/它正在工作，也許你沒有觸發事件，請參閱代碼中的註釋。 – kpucha

謝謝Kpucha，我檢查了你是正確的，該功能沒有觸發....我認爲它應該觸發的時刻窗口（網頁）的大小？您的CSS媒體查詢解決了這個問題，我很好奇爲什麼我的jscript不會觸發 – Alex

改變使用JQuery

回答

相關問題