I want to change my right and left of a css class from javascript and I can not

Question

I want to change my right and left of a css class from javascript and I can not

Navigation

#1 by (2 votes)

1

My problem is the following one I want to change the right and the left of a css from a javascript but from a resolution 1920 here is my code.

var es_safari = navigator.userAgent.toLowerCase().indexOf('safari') > -1;
var mediaquery = window.matchMedia("(max-media: 1920px)")
if (es_safari) {
  if (mediaquery.matches) {
    document.getElementsByClassName('.box-emergent-right').style.right = "38.100%";
    document.getElementsByClassName('.box-emergent').style.left = "38.100%";
  }
}

.box-emergent {
  left: 20%;
  background: red;
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid green;
}

.box-emergent-right {
  right: 70%;
  background: yellow;
}

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Prueba javascript</title>
  <link rel="stylesheet" href="">

</head>

<body>

  <div class="box-emergent">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea nam explicabo hic animi culpa debitis, odio ipsa excepturi quidem facilis, fugiat, cupiditate provident a porro. Ipsam, totam, obcaecati. Laudantium, quibusdam.</p>
  </div>

  <div class="box-emergent-right">

  </div>


</body>

First right image well rendered from chrome.

The Second Image may notice that since ipad does not revert well.

javascript html5 css safari

asked by Tysaic 11.09.2017 в 16:18

source

1 answer

Edit rows of a table with jquery Vector repeats the data of a query

score 2 · Answer 1

Solution with CSS

I recommend that, to avoid having to use Javascript, do it directly from the CSS through media queries .

Example:

.box-emergent {
  left: 20%;
  background: red;
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid green;
}

.box-emergent-right {
  right: 70%;
  background: yellow;
}

@media (max-width: 1920px) {
  .box-emergent-right{
      right: 38.100%;
  }
  
  .box-emergent{
    left: 38.100%;
  }
}

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Prueba javascript</title>
  <link rel="stylesheet" href="">

</head>

<body>

  <div class="box-emergent">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea nam explicabo hic animi culpa debitis, odio ipsa excepturi quidem facilis, fugiat, cupiditate provident a porro. Ipsam, totam, obcaecati. Laudantium, quibusdam.</p>
  </div>

  <div class="box-emergent-right">

  </div>


</body>

Solution with Javascript

In case you would like to do yes or yes from Javascript I have seen several failures in your code:

In your matchMedia function you should use max-width instead of max-media .
When you use the function getElementsByClassName you do not have to put the point to the classes, so there would be document.getElementsByClassName('box-emergent') .
Finally, as the function getElementsByClassName returns an array and you only have one element of each, you will have to refer to the first position (0) of the array to retrieve the only element that is found with that class. Otherwise it will return undefined and give you an error because you can not change the properties to an element that does not exist.

If you had more than one element that you wanted to change, you would have to loop through the array of elements with the same class.

Your corrected example:

var es_safari = navigator.userAgent.toLowerCase().indexOf('safari') > -1;
var mediaquery = window.matchMedia("(max-width: 1920px)")
if (es_safari) {
  if (mediaquery.matches) {
    document.getElementsByClassName('box-emergent-right')[0].style.right = "38.100%";
    document.getElementsByClassName('box-emergent')[0].style.left = "38.100%";
  }
}

.box-emergent {
  left: 20%;
  right: auto;
  background: red;
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid green;
}

.box-emergent-right {
  right: 70%;
  background: yellow;
}

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Prueba javascript</title>
  <link rel="stylesheet" href="">

</head>

<body>

  <div class="box-emergent">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea nam explicabo hic animi culpa debitis, odio ipsa excepturi quidem facilis, fugiat, cupiditate provident a porro. Ipsam, totam, obcaecati. Laudantium, quibusdam.</p>
  </div>

  <div class="box-emergent-right">

  </div>


</body>