wywoływanie funkcji

0

witam napisałem prosty skrypt (proszę o cierpliwość bo się uczę ) po zmienie rozdzielczośći poniżej 1000px w stronie która jest responsywna wewnętrzny div ma zmieniać kolor z czerwonego na niebieski. Ta sama funkcja działa mi w przypadku wywoływania w body zmienia wtedy kolor na całej stronie. Niestety w przypadku div mi nie działa kolor nie zmienia się. Podjerzewam że coś źle podpinam...

<div class="inside" style"width:320px;height:200px;background-color:red;" onresize="changeColor()">Wewnetrzny DIV </div></br>

skrypt

function changeColor() {
    var w = window.outerWidth;
    if(w<=1000)
    document.getElementByClassName("inside").style.backgroundColor = "blue";
}

proszę o pomoc co jest nie tak

3

Dlaczego nie zrobisz tego z wykorzystaniem media queries?

2

Pytanie, czy zdarzenie resize w ogóle się odpala na divach. W MDN piszą o tym, że jest to zdarzenie dla window:
https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event
i piszą o tym, że In some earlier browsers it was possible to register resize event handlers on any HTML element. It is still possible to set onresize attributes or use addEventListener() to set a handler on any element. However, resize events are only fired on the window object (i.e. returned by document.defaultView). Only handlers registered on the window object will receive resize events.

Podjerzewam że coś źle podpinam...

Przede wszystkim komplikujesz niepotrzebnie, bo to można zrobić za pomocą media queries w CSS. Chyba, że z jakichś powodów nie możesz tego zrobić, ale w takim razie to oznaczałoby, że źle zadałeś pytanie.

Co do podpinania eventów to teraz się addEventListener używa zwykle, ale twój sposób podpinania też powinien działać.

Tyle, że zdarzenie resize nie odpali się na divach, z tego co masz na MDN.

0

Nawet jeśli musisz to zrobić w JS to i tak warto użyć mediaqueries.

const query = window.matchMedia('(max-width: 1000px)');

function handleQuery(mq) {
	if (mq.matches) {
  	console.log('window <= 1000px');
  } else {
  	console.log('window > 1000px')
  }
}

query.addListener(handleQuery);

Zaletą tego jest, to że kod nie odpala się setki razy na sekundę przy każdej zmianie rozmiaru okna (jak twój). Tylko w warunkach granicznych, czytaj: przejście z wartości mniejszych od 1000px na większe i odwrotnie.

Dokumentacja

0

Jakiś pomysł jak to zaimplementować? Wiem że można zrobić nie używając JS. Ale właśnie chodzi tutaj aby użyć JS

0

Rozumiem że nie da się napisać takiego diva wewnętrznego w js ? Zmieniającego kolor względem rozdzielczości? To co napisałem działa z body

0

Prawie identyczny przykład miałeś w dokumentacji, którą ci wyżej podrzuciłem

const query = window.matchMedia('(max-width: 1000px)');
const div = document.getElementsByClassName('inside')[0];

function handleQuery(mq) {
    if (mq.matches) {
    	div.style.backgroundColor = 'red';
  } else {
    	div.style.backgroundColor = 'blue';
  }
}

query.addListener(handleQuery);

A jak chcesz, żeby ci sprawdzało warunek jeszcze na starcie strony, to dorzuć:

handleQuery(query);
1 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<style>
</style>
</head>
<body>

<div class="inside" style="width:320px;height:200px;background-color:red;">Wewnetrzny DIV </div></br>

<script>
window.addEventListener("resize", function(){
    var w = window.outerWidth;
    if (w<=1000) document.querySelector(".inside").style.backgroundColor = "blue";
    else         document.querySelector(".inside").style.backgroundColor = "red";
    
});
</script>
</body>
</html>
1
Łapa_krk napisał(a):

co dodać żeby działał ten jeden skrypt w przypadku kilku takich samych divów

Można to zrobić na kilka sposobów. Sugeruję taki:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

<div class="inside" style="width:320px;height:200px;">Wewnetrzny DIV </div></br>
<div class="inside" style="width:320px;height:200px;">Wewnetrzny DIV 1</div></br>
<div class="inside" style="width:320px;height:200px;">Wewnetrzny DIV 2</div></br>

<script>
  /* --- ustaw kolor --- */
  var o_head  = document.getElementsByTagName("head")[0];
  var o_css   = document.createElement("style");
  o_css.type  = "text/css";
  o_css_tnode = document.createTextNode("");
  
  o_head.appendChild(o_css);
  o_css.appendChild(o_css_tnode);
  o_css_tnode.nodeValue = ".inside {background-color:red;}";
  /* --- /ustaw kolor --- */

  /* --- zmieniaj kolor --- */
  window.addEventListener("resize", function(){
    var w = window.outerWidth;
    if (w<=1000) o_css_tnode.nodeValue = ".inside {background-color:blue;}";
    else         o_css_tnode.nodeValue = ".inside {background-color:red;}";
  });  
  /* --- zmieniaj kolor --- */
</script>
</body>
</html>

1 użytkowników online, w tym zalogowanych: 0, gości: 1