javascript 香草JS

Posted 2021-05-03

window.matchMedia('(max-width: 600px)').addListener(function (e) {
  if (e.matches) {
  console.log('The condition ' + e.media + ' has been met');
  }
});

window.matchMedia('(min-width: 601px) and (max-width: 960px)').addListener(function (e) {
  if (e.matches) {
  console.log('The condition ' + e.media + ' has been met');
  }
});

window.matchMedia('(min-width: 961px)').addListener(function (e) {
  if (e.matches) {
  console.log('The condition ' + e.media + ' has been met');
  }
});

// Another way

var sm = window.matchMedia('(max-device-width: 600px)');

mediaqueryresponse(e); 
sm.addListener(mediaqueryresponse); 

function mediaqueryresponse(sm) {
  if (e.matches) {
  // if media query matches
  console.log('The condition ' + e.media + ' has been met');
  }
}

var arrayEng = document.querySelectorAll('.js_eng');

rowNode.classList.add('single');
rowNode.classList.remove('single');

for (var i = 0; i < array.length; i++) {
  if (array[i].classList.contains('hide')) {
    array[i].classList.remove('single');
  } else if {
    array[i].classList.add('hide');
  }
}

// Get width/height of div
// offsetWidth includes borders
document.getElementById("yourDiv").clientWidth; // returns number, like 728
document.getElementById("yourDiv").offsetWidth; // 728 + borders width\

// Get parent node or first child node
document.querySelector('js_chi').firstChild;
document.querySelector('js_chi').parentElement;

// Get computer style
var elem = document.querySelector('.H-1e');
var property = window.getComputedStyle(elem, null).getPropertyValue("font-size");