Форум программистов, компьютерный форум, киберфорум
Наши страницы

JavaScript

Войти
Регистрация
Восстановить пароль
 
Andrey_Programm
12 / 12 / 8
Регистрация: 08.04.2016
Сообщений: 203
#1

Js. контент в псевдоэлементах - JavaScript

20.03.2017, 10:23. Просмотров 105. Ответов 1
Метки нет (Все метки)

Здравствуйте! только только малость коснулся JS. раньше этим не занимался.

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


2 проблемы:

не получается никак вставить текст через innerHTML

создается впечатление что у меня вообще не видит подключение файла js.
попытался загнать текст и через цикл и просто вставкой div.innerHTML ='Текст'; ничего не срабатывает.


вот код:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8">
    <title>Java Script. ЭПИЛОГ</title>
    <link rel="stylesheet" href="Style-JavaFilterPerekluchatel.css"> 
</head>
<body>
    <header>
    <h1></h1>
    </header>
    <main>
        <section> 
            <div class="picture">
                <div class="photo">
                </div>                
            </div>
            <div class="bottom_block">
                <ul class="toggles">
                    <li class="first" data-filter="first"></li>
                    <li class="second" data-filter="second"></li>
                    <li class="third" data-filter="third"></li>
                    <li class="fourth" data-filter="fourth"></li>
                </ul>
            </div>
        </section>
    </main>
    <footer>
    </footer>         
    <script type="text/javascript" src="JavaFilterPerekluchatel.js"></script>  
</body>
 
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
 body {
    margin: 0;
    padding: 0;
}
 
main {
    width: 70%;
    margin: 20 auto;
}
 
section {
    min-width: 550px;
    margin: auto;
    background-image: url("img/sativa.png");
}
 
.photo {
    width: 320px;
    height: 320px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    margin: 0 auto;
    border: 10px solid #ffffff;
    background-image: url("img/spb-1.jpg");
    background-size: cover;
}
 
.bottom_block {
    box-sizing: border-box;
    margin: 5% auto;
    padding: 20px 0 0 20px;
    min-height: 269px;
    width: 90%;
    background: #333333;    
}
 
ul.toggles {
    display: block;
    width: 350px;
    padding: 0;
    margin: 0 auto;
    list-style: none;
    white-space: nowrap;
}
 
li {
    display: inline-block;
    background-image: url("img/toggle-pic.jpg");
    width: 80px;
    height: 80px;
    background-size: cover;
    padding: 0;
    position: relative;
}
 
li:not(:last-child) {    
    margin-right: 10px;  
}
 
li::after {
    content: "";
    position: absolute;
    bottom: 5%;
    left: 0;
    color: white;
    text-align: center;
    width: 100%;
}
 
.active {
    border: 2px solid white;
}
 
 
/*Подключаю фильтры*/
 
.first {
    filter: contrast(0.9) brightness(1.2) hue-rotate(-20deg) saturate(1.7) sepia(0.4);
}
 
.second {
    filter: saturate(2.5) hue-rotate(-30deg) contrast(0.67) sepia(0.4);
}
 
.third {
    filter: contrast(1.1) brightness(1.3) saturate(2.4) sepia(0.4);
}
 
.fourth {
    filter: contrast(2) saturate(5) hue-rotate(-180deg);
}

Javascript
1
2
3
4
5
6
7
8
9
10
11
var base = document.querySelectorAll('ul.toggles li');
var baseafter = base + '::after';
var header =  document.querySelectorAll('h1');
header.innerHTML = 'Dfcz';
 
for (var i=0; i<base.lenght; i++)
{
    baseafter[i].innerHTML = base[i].dataset.filter;
}
 
div.innerHTML ='Текст';

Архив с кодом прилагаю.
0
Вложения
Тип файла: rar Java Script -ЭПИЛОГ.rar (92.5 Кб, 1 просмотров)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
20.03.2017, 10:23
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Js. контент в псевдоэлементах (JavaScript):

Выезжающий контент - JavaScript
Здравствуйте. Подскажите как можно реализовать выезжающий контент при прокрутке страницы (текст выезжает слева и справа при прокрутке)....

Подгружать контент на js - JavaScript
Привет, мир! Знатоке JS подскажите как можно осуществить что-то подобие Ленты в соц. сетях? Т.е. Есть страница с новостями. На странице...

onload и контент - JavaScript
Я вот думаю... может ли помешать проблемный счетчик onload функции... То есть я сделал себе прелоадер страниц, пока страница не загрузится,...

Контент в виде 3d куба - JavaScript
Создал 3д куб, и при наведении курсора он вращается. Каждая сторона куба это div с контентом. Но проблема в том, что куб вращается только...

добавить контент в iframe - JavaScript
Здравствуйте. Подскажите , как можно решить такую задачу - пишу редактор (для админки), есть информация вида $title = &quot;Название...

Странный контент подгружаемый с JavaScript - JavaScript
Планировал загрузить линию конторы Фон по адресу https://bets.fonbet.com/?locale=ru Посмотрел, что загрузка осуществляется с помощью...

1
Andrey_Programm
12 / 12 / 8
Регистрация: 08.04.2016
Сообщений: 203
20.03.2017, 11:59  [ТС] #2
в цикле length - не так написано , но сути дела это не меняет
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
20.03.2017, 11:59
Привет! Вот еще темы с ответами:

Google Maps API Контент метки google maps - JavaScript
Метки создаются и между ними переход осуществляется нормально, но не показывается контент при нажатии на метку. Как это правильно...

Закрыть контент от поисковых систем - JavaScript
Всем привет! Надеюсь на помощь форумчан по следующей проблеме: Решил я на своем сайте скрыть от Яндекса ненужный контент (доставка,...

Как найти скрипт который подгружает контент - JavaScript
Здраствуйте недавно начал работу над парсером, сразу скажу что не для кражи статей а только для сбора статистики. Так вот странички которые...

Подскажите пожалуйста, как правильно вывести контент - JavaScript
Подскажите пожалуйста, как правильно вывести контент. Есть скрипт вывода: parent.main.document.all(&quot;mainform&quot;).innerHTML = '&lt;div...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Рейтинг@Mail.ru