Управление псевдоэлементами css средствами javascript - JavaScript, Ajax

Naive · 21.02.2012, 17:34

Всем привет.
Появилась надобность изменить или хотя бы уничтожить псевдоэлемент :after средствами js. Быстрое гугление проблемы результатов пока не дало. Может кто сталкивался с этим?

lux16 · 23.02.2012, 00:59

Поясни задачу

Naive · 23.02.2012, 15:22

Имеется блок с фиксированным позиционированием вверху страницы.
У этого блока имеется округлая тень с радиусом размытия 70 пикселей. Чтобы сделать ее округлой, я создал овальный псевдоэлемент, который и стал отбрасывать эту тень.
Основная проблема же была в том, что поверх тени идет небольшой точечный узор, его я сделал бэкграундом к еще одному псевдоэлементу. Однако при включеных скриптах этот узор можно нарисовать тенью и тогда старый узор не будет перекрывать контент.

Код:

.middle {
	width:960px;
	position: relative;
	padding:0 15px;
	margin:0 auto;
}

#top{
	position:fixed;
	z-index:20;
	height:72px;
	width:100%;
	top:0;
	background:#fff;
	-webkit-box-shadow:0 1px 1px #888;
	   -moz-box-shadow:0 1px 1px #888;
	     -o-box-shadow:0 1px 1px #888;
	        box-shadow:0 1px 1px #888;
}


#top .middle:before{
	content:'';
	position: absolute;
	width:100%;
	height:70px;
    z-index:19;
    clip:rect(73px,1200px,500px,-300px);
    -webkit-border-radius:50%;
       -moz-border-radius:50%;
         -o-border-radius:50%;
            border-radius:50%;
    -webkit-box-shadow:0 0 50px rgba(0,180,255,0.5);
       -moz-box-shadow:0 0 50px rgba(0,180,255,0.5);
         -o-box-shadow:0 0 50px rgba(0,180,255,0.5);
            box-shadow:0 0 50px rgba(0,180,255,0.5);
}
#top .middle:after{
	content:'';
	position: absolute;
	z-index:21;
	top:73px;
	left:0;
	width:100%;
	height:50px;
	background:url(../img/dotes.png);
      -moz-opacity: 0.23;
    -khtml-opacity: 0.23;
           opacity: 0.23;
}

Задача переопределить стили для #top .middle:after

Naive · 23.02.2012, 15:23

Даблпост, удалите пожалуйста.

lux16 · 24.02.2012, 00:36

Хм, никак. По моему есть решение, просто сделать отдельный стиль, и просто определить его для middle:after средствами jQuery

nerv · 01.03.2012, 15:27

Naive, не уверен, но может быть это будет Вам полезно.

Код:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            div {
                background-color: yellow;
                height: 50px;
            }
            span {
                quotes: "<" ">";
            }
            span:before {
                content: open-quote;
            }
            span:after {
                content: close-quote;
            }
        </style>
    </head>
    <body>
        
        <div id="top">text text <span>text</span> text text text text</div>
        
        <script>
            var styleSheet = document.styleSheets[ 0 ], allRules, rule;
            
            alert( styleSheet.cssText );
            
            if ( styleSheet.cssRules ) {
                // alert( 'styleSheet.cssRules - ' + styleSheet.cssRules.length );
                // insertRule() & deleteRule()
                allRules = styleSheet.cssRules;
            } else if ( styleSheet.rules ) {
                // alert( 'styleSheet.rules - ' + styleSheet.rules.length );
                // addRule() & removeRule()
                allRules = styleSheet.rules;
            }
            
            rule = allRules[ 2 ];
            
            alert( rule.selectorText );
            alert( rule.style.cssText );
            
            rule.style.cssText = '';
            
            alert( rule.style.cssText );
            alert( styleSheet.cssText );
            
        </script>

    </body>
</html>

21.02.2012, 17:34	#1
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Управление псевдоэлементами css средствами javascript Всем привет. Появилась надобность изменить или хотя бы уничтожить псевдоэлемент :after средствами js. Быстрое гугление проблемы результатов пока не дало. Может кто сталкивался с этим? Alar, верни репу!

23.02.2012, 00:59	#2
lux16 Форумчанин Регистрация: 11.02.2009 Сообщений: 305	Поясни задачу Хочу быть лучшим, но пока что я только обычный =(

23.02.2012, 15:22	#3
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Имеется блок с фиксированным позиционированием вверху страницы. У этого блока имеется округлая тень с радиусом размытия 70 пикселей. Чтобы сделать ее округлой, я создал овальный псевдоэлемент, который и стал отбрасывать эту тень. Основная проблема же была в том, что поверх тени идет небольшой точечный узор, его я сделал бэкграундом к еще одному псевдоэлементу. Однако при включеных скриптах этот узор можно нарисовать тенью и тогда старый узор не будет перекрывать контент. Код: .middle { width:960px; position: relative; padding:0 15px; margin:0 auto; } #top{ position:fixed; z-index:20; height:72px; width:100%; top:0; background:#fff; -webkit-box-shadow:0 1px 1px #888; -moz-box-shadow:0 1px 1px #888; -o-box-shadow:0 1px 1px #888; box-shadow:0 1px 1px #888; } #top .middle:before{ content:''; position: absolute; width:100%; height:70px; z-index:19; clip:rect(73px,1200px,500px,-300px); -webkit-border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%; border-radius:50%; -webkit-box-shadow:0 0 50px rgba(0,180,255,0.5); -moz-box-shadow:0 0 50px rgba(0,180,255,0.5); -o-box-shadow:0 0 50px rgba(0,180,255,0.5); box-shadow:0 0 50px rgba(0,180,255,0.5); } #top .middle:after{ content:''; position: absolute; z-index:21; top:73px; left:0; width:100%; height:50px; background:url(../img/dotes.png); -moz-opacity: 0.23; -khtml-opacity: 0.23; opacity: 0.23; } Задача переопределить стили для #top .middle:after Alar, верни репу!

23.02.2012, 15:23	#4
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Даблпост, удалите пожалуйста. Alar, верни репу! Последний раз редактировалось Naive; 23.02.2012 в 15:27.

24.02.2012, 00:36	#5
lux16 Форумчанин Регистрация: 11.02.2009 Сообщений: 305	Хм, никак. По моему есть решение, просто сделать отдельный стиль, и просто определить его для middle:after средствами jQuery Хочу быть лучшим, но пока что я только обычный =(

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Оформление e-mail средствами CSS ??	D-Snaker	HTML и CSS	8	05.01.2012 17:57
Эффект ТВ помех средствами CSS	Zmicer	HTML и CSS	1	10.11.2011 22:57
javascript в классе CSS	Kasper1	JavaScript, Ajax	0	22.02.2011 20:52
Управление COM портом средствами Visual Basic 6.	С.М.С	Помощь студентам	2	05.04.2010 18:22
Управление внешними устройствами средствами Delphi	RockForr	Общие вопросы Delphi	7	03.05.2009 22:04