Показать сообщение отдельно
  #1 (permalink)  
Старый 26.01.2022, 19:20
Интересующийся
Отправить личное сообщение для rita Посмотреть профиль Найти все сообщения от rita
 
Регистрация: 01.06.2020
Сообщений: 22

Стиль для отфильтрованного элемента
ПРИВЕТ!
Кто-нибудь подскажите, как задать стиль для отфильтрованного элемента(filter в скрипте). Через filter.style.color="red" получаю ошибку.
<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style>
			* {
			box-sizing: border-box;
			}
			body{
			width:1920px;
			height:1024px;
			background-color:#fffdfe;
			font-family: Brandon Grotesque;
			letter-spacing: 0.3px;
			}
			#search_bar {
			height: 40px;
			width: 652px;
			width: 652px;
			border: 1px solid #D6D6D6;
			position: absolute;
			top:48px;
			bottom: 0%;
			margin-left: 349px;
			margin-right: 349px;
			cursor: pointer;
		    font-size: 13px;
			padding-left: 9px;
			}
			#row2 {
			list-style-type: none;
			padding: 0;
			margin: 0;
			display: grid;
			width: 652px;
			}
			#row2 li a {
			border: 1px solid #ddd;
			background-color: #f6f6f6;
			text-decoration: none;
			font-size: 18px;
			color: blue;
			display: inline-block;
			border-right: none;
			border-left: none;
			padding-top: 25px;
			padding-bottom: 25px;
			}
			#row2 li a:hover{
			background-color: #eee;
			color: red;
			}
			#icon1::after {
			content: "\2B07";
			float: right;
			font-size: 23px;
			background-color:aqua;
			display: inline-block;
			}
			#icon1:hover::after {
			content: "\2B06";
			}
			#top2,#top{
			margin-left: 349px;
			margin-right: 349px;
			background: aliceblue;
			width: 652px;
			margin-top: 155px;
			}
			#top2{
			margin-top: 55px;
			}
			#top3{
			align-items: center;
			width: 637px;
			display: inline-block;
			background: #406e97;;
			display: inline-block;
			}
			.column{
			color:background: #323232;
			cursor: pointer;
			display: inline-block;
			padding-right: 12px;
			}
			.column:hover{
			color:#EF5E3A;
			}
			a{text-decoration:none;
			}
			a:hover{
			color:red;
			}
			
			.color{
			color:aqua;
			}		
		</style>

	</head>
	<body>
		
		<input type="text" name="example"  id="search_bar" onkeyup="myFunction()" value="&#128269; Search FAQ" onfocus="value=''">
		<div id="all_top">
			<div id="top"></div>
			<div id="top2"></div>
		</div>
		
		<script>
			var arr2=[
			{name:'HELLO'},
			{name:'GOOD DAY'},
			{name:'MORNING'},
			]
			var text='<ul id="row2">';
			for(var i=0; i<arr2.length; i++){
				text+='<li ><a href="#"><div id="top3">'+arr2[i].name+'</div></a></li>';
			}
			text+='</ul>';
			document.getElementById('top2').innerHTML= text;
			function myFunction() {
				var input, filter, ul, li, a, i, txtValue,b;
				input = document.getElementById("search_bar");
				filter = input.value.toUpperCase();
				//filter.style.color="red";
				console.log(filter+'-it filter');
				ul = document.getElementById("all_top");
				li = ul.getElementsByTagName("li");
				for (i = 0; i < li.length; i++) {
					a = li[i].getElementsByTagName("a")[0];
					txtValue = a.textContent || a.innerText;
					if (txtValue.toUpperCase().indexOf(filter) > -1) {
						li[i].style.display = "";
						} else {
						li[i].style.display = "none";
					}
				}
			}
		</script>
	</body>
</html>

Последний раз редактировалось rita, 26.01.2022 в 20:12.
Ответить с цитированием