Использование JavaScript для изменения стиля CSS в зависимости от ширины страницы

Question

Использование JavaScript для изменения стиля CSS в зависимости от ширины страницы

0

Я работаю над назначением для класса, где я должен сделать внешний файл JavaScript, который проверяет текущую ширину страницы и изменяет связанный стиль CSS на основе этого, и это происходит, когда страница загружается или изменяется. Обычно нам дают пример, чтобы отделить наше задание, но на этот раз это было не так.

По существу, мы должны использовать инструкцию if... then, чтобы изменить стиль. Я не знаю, какие будут соответствующие утверждения для этой функции. Я осмотрелся, и потенциальные решения либо слишком продвинуты для класса, либо не переходят то, что мне нужно. Насколько я знаю, я не могу использовать jQuery или CSS-запросы.

Если бы кто-нибудь мог дать мне пример того, как я напишу это, я был бы очень благодарен.

ghysterian 17 апр. 2014, в 04:23

Источник

1

Вы должны сначала сделать лучший снимок и опубликовать то, что вы пробовали и т. Д.
mccainz 17 апр. 2014, в 02:09
0

window.onresize .
lifetimes 17 апр. 2014, в 02:10
0

Вы должны изменить сам файл CSS или просто заменить файл?
Richard 17 апр. 2014, в 02:11
0

Мне дали два отдельных внешних CSS-документа, поэтому мне нужно заменить файл.
ghysterian 17 апр. 2014, в 02:59
0

почему бы не использовать Media Queries? вместо того, чтобы изменить ссылку и перезагрузить весь CSS всех элементов?
kenicky 17 апр. 2014, в 03:43

Показать ещё 3 комментария

Теги:

javascript

html

css

3 ответа

Ещё вопросы

Вы должны сначала сделать лучший снимок и опубликовать то, что вы пробовали и т. Д.
Вы должны изменить сам файл CSS или просто заменить файл?
Мне дали два отдельных внешних CSS-документа, поэтому мне нужно заменить файл.
почему бы не использовать Media Queries? вместо того, чтобы изменить ссылку и перезагрузить весь CSS всех элементов?

user3546754 · Answer 1 · 2014-04-17T17-56-00.000Z

//Использовать это //

function adjustStyle() {
var width = 0;
// get the width.. more cross-browser issues
if (window.innerHeight) {
    width = window.innerWidth;
} else if (document.documentElement && document.documentElement.clientHeight) {
    width = document.documentElement.clientWidth;
} else if (document.body) {
    width = document.body.clientWidth;
}
// now we should have it
if (width < 799) {
    document.getElementById("CSS").setAttribute("href",     "http://carrasquilla.faculty.asu.edu/GIT237/smallStyle.css");
} else {
    document.getElementById("CSS").setAttribute("href", "http://carrasquilla.faculty.asu.edu/GIT237/largeStyle.css");
}
}

// now call it when the window is resized.
window.onresize = function () {
adjustStyle();
};
window.onload = function () {
adjustStyle();
};

Gian Carlo · Answer 2 · 2014-04-17T00-01-00.000Z

Попробуйте этот код

html - это

<div id="resize" style="background:red; height: 100px; width: 100px;"></div>

javascript - это

var resize = document.getElementById('resize');
window.onresize=function(){
    if(window.innerWidth <= 500) {
        resize.style = "background:blue; height: 100px; width: 100px;";
    }
    else {
        resize.style = "background:red; height: 100px; width: 100px;";
    }
};

Я создал образец, на который вы смотрите здесь. TESTRESIZE попробуйте изменить размер вашего браузера и сообщите мне, если это то, что вы ищете.

Это основная идея, да. Единственное отличие состоит в том, что изменяемый объект - это внешний CSS-документ, применяемый к HTML. Я не знаю, как это было бы иначе, хотя.
Вы можете попробовать это, нажмите здесь!
stylesheet = document.styleSheets [0]; stylesheet.insertRule (". have-border {border: 1px solid black;}", 0);

paulka · Answer 3 · 2014-04-17T00-09-00.000Z

Используйте запросы CSS и медиа. Это плохая идея изменить стиль на js.