Блог

Главная - Вопросы по программированию - Как изменить CSS при нахождении специального параметра в url с помощью javascript

Как изменить CSS при нахождении специального параметра в url с помощью javascript

#javascript #html #css

#javascript #HTML #css

Вопрос:

Когда у меня есть следующий параметр поиска в URL ?lname=lname , я хочу применить следующий CSS:

 .fname {
  display: none;
}
 
.lname {
  display: block;
}
  
      <div class="fname">
       <input id="userInput" class="form-control" placeholder="Enter Your Name">
     </div>

     <div class="lname">
       <input id="userInput" class="form-control" placeholder="Enter Your Name">
     </div>

Текущий код CSS выглядит следующим образом:

 .lname {
  display: none;
}

Комментарии:

1. Если есть какая-то логика на стороне сервера, вы можете определить, какой файл CSS находится в вашем заголовке, на основе строки запроса. Тогда вам не придется ждать загрузки и выполнения скрипта jquery / js, прежде чем нужные стили будут видны пользователю.

Ответ №1:

Вы можете использовать URLSearchParams для получения параметров из URL, а затем добавить код CSS в соответствии с вашими параметрами

 const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('lname');

if(myParam !== null){
  var styles = `
    .lname{ display: none; }
}
var styleSheet = document.createElement("style")
styleSheet.type = "text/css"
styleSheet.innerText = styles
document.head.appendChild(styleSheet)

Ответ №2:

Предпочитаю использовать jQuery.

 <head>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

Для синтаксического анализа URL смотрите это как ссылку

 // If URL is http://www.somedomain.com/account/search?filter=a#top

window.location.pathname // /account/search

// For reference:

window.location.host     // www.somedomain.com (includes port if there is one)
window.location.hostname // www.somedomain.com
window.location.hash     // #top
window.location.href     // http://www.somedomain.com/account/search?filter=a#top
window.location.port     // (empty string)
window.location.protocol // http:
window.location.search   // ?filter=a

Используйте этот метод для извлечения параметров

 var getUrlParameter = function getUrlParameter(a) {
    var d = window.location.search.substring(1),
        c = d.split("amp;"),
        e, b;
    for (b = 0; b < c.length; b  ) {
        e = c[b].split("=");
        if (e[0] === a) {
            return e[1] === undefined ? true : decodeURIComponent(e[1])
        }
    }
};

Затем используйте простую проверку и примените css с помощью jQuery

 if(getUrlParameter("lname") === 'lname'){
       $(".fname").css({display:'none'});
       $(".lname").css({display:'block'});     
}