Как добавить класс для стиля моего javascript в css classlist.add не работает - PullRequest
Новая
       2

Как добавить класс для стиля моего javascript в css classlist.add не работает

0 голосов
/ 09 июля 2020
• 1000 1012 * больше не работает.

Единственный способ стилизовать изображения javascript - использовать * img {в css, что не идеально.

мой код используется в моем html: 

  <script>


    var myPix = new Array("/img/portfolio/tiket.jpg","/img/portfolio/30day.jpg", "/img/portfolio/board.jpg", "/img/portfolio/cyanotype.jpg","/img/portfolio/dissent.jpg", "/img/portfolio/geoapp.jpg", "/img/portfolio/jailbreak.jpg","/img/portfolio/gtr.jpg", "/img/portfolio/eid.jpg")   

        document.addEventListener("click", showCoords);
        
        function showCoords(event)
        {
            
        var randomNum = Math.floor(Math.random() * myPix.length); 
        var yourImage = document.createElement("img");
        yourImage.src = myPix[randomNum] ;
        
        
        yourImage.style.cssText = " border-radius: 20px; box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.3); z-index: -2; width:360px;height:auto;position:fixed;top:" + event.clientY + "px;left:" + event.clientX + "px;";
        
        document.body.appendChild(yourImage);
        
        }

        jQuery.fn.reverse = [].reverse;


</script>

Код предназначен для размещения случайных изображений везде, где пользователь нажимает на экране.

Ответы [ 2 ]

1 голос
/ 09 июля 2020

Вот более элегантное решение: 

const pictures = [
  "/img/portfolio/tiket.jpg", "/img/portfolio/30day.jpg", 
  "/img/portfolio/board.jpg", "/img/portfolio/cyanotype.jpg",
  "/img/portfolio/dissent.jpg", "/img/portfolio/geoapp.jpg",
  "/img/portfolio/jailbreak.jpg", "/img/portfolio/gtr.jpg", 
  "/img/portfolio/eid.jpg"
];  

function showCoords(event) {
  var randomNum = Math.floor(Math.random() * pictures.length); 
  var element = document.createElement("img");
  
  element.src = pictures[randomNum];
  element.style.cssText = `top: ${event.clientY}px; left: ${event.clientX}px;`;
  
  document.querySelector('body').append(element);
}

document.addEventListener('click', showCoords);
img {
  border-radius: 20px;
  box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.3);
  z-index: -2;
  width: 360px;
  height: auto;
  position: fixed;
}
1 голос
/ 09 июля 2020

Отлично работает, если добавить класс. Попробуйте живую демонстрацию ниже, это то, что вы хотите? 

var myPix = ["https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png", "https://cdn4.iconfinder.com/data/icons/social-media-2210/24/Whatsapp-128.png", "https://cdn4.iconfinder.com/data/icons/social-media-2210/24/Instagram-128.png", "https://cdn4.iconfinder.com/data/icons/social-media-2210/24/Youtube-128.png", "https://cdn4.iconfinder.com/data/icons/social-media-2210/24/Facebook-128.png", "https://cdn4.iconfinder.com/data/icons/social-media-2210/24/Twitter-128.png", "https://cdn4.iconfinder.com/data/icons/social-media-2210/24/Dribbble-128.png"];

document.addEventListener("click", showCoords);

function showCoords(event) {
  var randomNum = Math.floor(Math.random() * myPix.length);
  var yourImage = document.createElement("img");
  yourImage.src = myPix[randomNum];
  yourImage.classList.add('mystyle');

  yourImage.style.left = event.clientX + "px";
  yourImage.style.top = event.clientY + "px";

  document.body.appendChild(yourImage);
}
.mystyle {
  border-radius: 20px;
  box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.3);
  width: 60px; margin-left: -30px;
  height: 60px; margin-top: -30px;
  position: fixed;
}
...