Javascript-форум - Как сбросить установленные прежде стили?

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Как сбросить установленные прежде стили? (https://javascript.ru/forum/events/21727-kak-sbrosit-ustanovlennye-prezhde-stili.html)

Как сбросить установленные прежде стили?

Здравствуйте, будте добры, подскажите. Я написал функцию, которая выбирает все параграфы в массив и при клике на определенный параграф применяет к нему одни и те же стили:

var p=document.getElementsByTagName("P");
	for(var i=0; i<p.length; i++){
	 p[i].onclick=function(){
	 this.style.border="1px solid red";
	 this.style.backgroundColor="rgb(255, 255, 204)";
	 this.style.padding="5px";
	 }
	}

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

Покатит?

<p>one</p>
<p>two</p>
<p>three</p>

<script type="text/javascript">
var p=document.getElementsByTagName("P"), len = p.length;
for(var i=0; i<len; i++){
  p[i].onclick=function(){
    for(var j=0; j<len; j++){
      p[j].style.border="0px";
      p[j].style.backgroundColor="rgb(255, 255, 255)";
      p[j].style.padding="0px";
    }
    this.style.border="1px solid red";
    this.style.backgroundColor="rgb(255, 255, 204)";
    this.style.padding="5px";
  }
}
</script>

пи.си. а ваще для таких целей css не зря придумали))

Триви,
благодарю, ещё как покатит.

И хотелось бы знать как снять выделение при повторном нажатии на выделенный параграф.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		p { padding : 10px; }
		.active { border: 5px solid red; padding: 5px; }
	</style>
</head>
<body>
	<div id="wrapper">
		<p>
		Aliquam iaculis risus in nisl vehicula a porta odio cursus. In hac habitasse platea dictumst. Sed et elit tortor. Morbi lorem neque, porta et ultricies non, egestas vitae tellus. Mauris posuere, erat vel molestie egestas, dolor purus luctus odio, ut vehicula felis erat nec mi. Aliquam ultrices hendrerit vestibulum. Cras fermentum augue eu urna rhoncus placerat at porta velit. Aliquam dictum euismod leo, et fermentum odio ultricies quis. Cras vulputate lacus eget erat lobortis vitae sodales leo suscipit. Pellentesque non felis est, id pulvinar nunc.
		</p>
		<p>
		Fusce a turpis ipsum, nec scelerisque ipsum. Nunc eget lorem at massa aliquam ornare. Duis lacinia, mi sit amet viverra rhoncus, sem leo pulvinar nunc, in lobortis velit eros vitae mi. Ut tempus lorem at dolor blandit vitae viverra quam ornare. Nulla tellus purus, fringilla in ultrices eu, imperdiet vitae quam. Integer lectus erat, eleifend ut sollicitudin vel, feugiat vitae augue. Nullam porta pretium lorem at commodo. Aliquam mauris libero, porta eu tincidunt eu, vulputate non ante. In blandit euismod suscipit. Curabitur vel felis mi, in luctus eros. Ut accumsan, risus quis bibendum ullamcorper, quam neque porttitor velit, nec suscipit ipsum orci et orci. Aliquam lorem lectus, rutrum non consequat in, condimentum vel mi. Etiam pellentesque ullamcorper elementum.
		</p>
		<p>
		Fusce ut semper lacus. Pellentesque ante nibh, suscipit ut euismod in, volutpat vel mauris. Fusce tempor elit et neque lobortis non facilisis mauris porttitor. Suspendisse egestas, sapien at tincidunt faucibus, turpis orci consectetur mauris, id blandit orci diam nec enim. Ut in leo at tellus aliquam dictum in sit amet nibh. In vitae porta elit. Vestibulum ut libero vitae purus egestas pellentesque in vel ipsum. Vivamus at augue ante, eget interdum elit. Sed urna lectus, fermentum blandit porta vel, interdum sed nibh. Etiam laoreet sagittis eros, et vehicula neque hendrerit eu. Nulla nec eros ut sem ultrices consectetur in id justo.
		</p>
		<p>
		Cras eu erat erat. Quisque varius, lectus et tempor faucibus, metus eros volutpat nunc, ac mollis elit leo vel urna. Sed ullamcorper faucibus fringilla. Sed imperdiet scelerisque lacus et ultricies. Nulla facilisi. Donec vitae orci eu lorem tincidunt auctor. Ut eu tortor eu mauris ultrices pharetra vitae suscipit tellus.
		</p>
		<p>
		Curabitur auctor ipsum ac justo vehicula hendrerit. Nunc adipiscing nibh ut nibh venenatis semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam eget dui purus, vitae vulputate nunc. Nunc est orci, luctus fringilla elementum ut, viverra vel enim. Ut egestas auctor lacus. Mauris non accumsan dolor. Etiam condimentum, nibh et viverra ultricies, dolor tellus imperdiet diam, sit amet pretium velit mi pharetra est. Fusce adipiscing tortor ut nisl convallis dapibus. Suspendisse sed arcu in sem elementum varius.
		</p>
	</div>
	<script>
		(function( window, elem ){
			var currentParagraph;
			function handler( e ) {
				var target = e ? e.target : window.event.srcElement;
				if ( target.nodeType === 3 ) { target = target.parentNode; }
				if ( target.nodeName.toLowerCase() === "p" && target != currentParagraph ) {
					if ( currentParagraph ) {
						currentParagraph.className = (" " + currentParagraph.className + " ").replace(" active ", "").replace(/^\s+|\s+$/, '');
					}
					currentParagraph = target;
					currentParagraph.className = (currentParagraph.className + " active").replace(/^\s+|\s+$/, '');
					return;
				}
				if ( target == currentParagraph ) {
					currentParagraph.className = (" " + currentParagraph.className + " ").replace(" active ", "").replace(/^\s+|\s+$/, '');
					currentParagraph = null;
				}
			};
			if ( elem.addEventListener ) {
				elem.addEventListener("click", handler, false);
			} else if ( elem.attachEvent ) {
				elem.attachEvent("click", handler);
			}
		})( window, document.getElementById('wrapper') );
	</script>
</body>
</html>

nikita.mmf,
спасибо... хмм, не знал, что такую простейшую операцию, как приписывание и удаление стилей с элемента по щелчку мышки так сложно осуществить на javascript.

выкладываю свою версию для тогглинга классов

// короткое определение IE
var ie = /*@cc_on!@*/0,
    // рега для вырезания классов
    clreg = /\b*!*active*/!*\b\s*/g;


// обработчик клика.
var handler = function(e){
    
    // на что кликнули
    var el = ie ? event.srcElement:e.target,
        // классы у элемента
        cl = el.className;
    
    // если кликнули по параграфу
    el.tagName=="P" &&
        ~cl.indexOf("active") && 
            // если у него нет класса active, то заменяем его пустым местом
            (el.className=cl.replace( clreg, "")) || 
                // иначе - ставим
                (el.className+=" active");
};

// сокращение.
var body = document.body;
// кроссбраузерность.
ie ? body.attachEvent("onclick",handler):body.addEventListener('click',handler,0);

живой пример :

<style>.active { padding : 5px;border: 2px red solid; } </style>
<p>Lorem Ipsum...</p>
<p>Sit Dolor amet...</p>
<script>
var ie = /*@cc_on!@*/0,
    clreg = /\bactive\b\s*/g;

var handler = function(e){
    var el = ie ? event.srcElement:e.target,
        cl = el.className;
    
    el.tagName=="P" &&
        ~cl.indexOf("active") && 
            (el.className=cl.replace( clreg, "")) || 
                (el.className+=" active");
};

var body = document.body;

ie ? body.attachEvent("onclick",handler):body.addEventListener('click',handler,0);
</script>

А у такого варианта есть какие-нибудь недостатки:

<p>one</p>
<p>two</p>
<p>three</p>

<script>
var styles;
var p=document.getElementsByTagName("P");
	for(var i=0; i<p.length; i++){
	p[i].onclick=function(){
		if(styles){
		styles.style.border="";
		styles.style.backgroundColor="";
		styles.style.padding="";
		}
		if(styles!=this){
		this.style.border="1px solid red";
		this.style.backgroundColor="rgb(255, 255, 204)";
		this.style.padding="5px";
		styles=this;
		}
		else {styles=null;}
	}
	}
</script>

медленно
чем вам наш код не понравился ?
не будет нормально работать : переменная style - для всех параграфов. будет одновременно только один элемент с данным классом.
а если вы заходите поменять стили по-умолчанию (до клика). что, в скрипты лезть?

в принципе, если не хотите использовать чужой код - дерзайте свой. мы не настаиваем :)

1) А как скорость исполнения определить? На первый взгляд всё моментально.:)
2) Мне все понравилось, спасибо большое, просто для меня это пока сложно, а хочу сам во всё въезжать.

3 и 4 согласен.