| Мишка | 25.06.2012 15:36 |
должно получиться следующее
вот так примерно должно выглядеть.
просто у меня не меняется код цвета, т.к. несколько появляется мест куда он должен ставиться, если я правильно излагаю..
применение свойств ко всем элементам
вообщем на странице к примеру 10 элементов <span>
как изменить цвет текста на красный сразу для всех десяти элементов? |
присоединяюсь!
у меня проблема с тем что надо поменять иннер текст для 10 элементов. но конструкция: onMouseOver="text1.innerHTML='#070';" не работает, поскольку текст1 получается у многих элементов, а при всего одном элементе с определенным айди - всё норм. :( помогите разобраться неразбирающемуся! пожалуйста. |
spans=document.getElementsByTagName('span')
for(var i=0;i<spans[i];i++){ spans[i].style.color='red' } |
Например, так
<style>
.red span {color: red}
</style>
<body>
<button onclick="document.body.className = 'red'">click</button><br>
<span>text</span><br>
<span>text</span><br>
<span>text</span><br>
</body>
|
Хм, я люблю использовать Traversal API ;) :)
<span>Текст1</span>
<span>Текст2</span>
<span>Текст3</span>
<span>Текст4</span>
<span>Текст5</span>
<script type='text/javascript'>
function load(){
function spanFilter(n){
if (n.tagName == 'SPAN') return NodeFilter.FILTER_ACCEPT;
else return NodeFilter.FILTER_SKIP;
}
var spans = document.createNodeIterator(
document,
NodeFilter.SHOW_ELEMENT,
spanFilter,
false
);
while((span = spans.nextNode()) != null){
span.style.color = 'red';
}
}
setTimeout('load()', 5000);
</script>
|
Цитата:
<span style="color: <span id="text1">red</span>;"><span id="text2" style="color: red;">ЦВЕТ :з)</span></span> <br /> <span style="color: <span id="text1">red</span>;"><span id="t2" style="color: red;">ЦВЕТ :з)</span></span> <br /> <div> <ul> <li onMouseOver="text1.innerHTML='#300'; text2.style.color='#300';" style="background: #300"></li> <li onMouseOver="text1.innerHTML='#040'; text2.style.color='#040';" style="background: #040"></li> <li onMouseOver="text1.innerHTML='#004'; text2.style.color='#004';" style="background: #004"></li> </ul> </div> во второй строке с айди текст1 был специально изменен айди текст2 на т2, что бы видно было что с единственным (так ведь и должно быть, идентификатором работает онмаусовер. а Ваш пример я не совсем представляю как применить в моем случае, поскольку мне нужно не свойство тега менять, а именно его текст |
Мишка,
учитесь? в качестве заметки лучше используйте функцию с аргументами (если не поняли то вот пример:
<li onMouseOver="izm(this, '#300')">lll</li>
<li onMouseOver="izm(this, '#040')">lll</li>
<li onMouseOver="izm(this, '#004')">lll</li>
<script>
function izm(th, cvet){
th.style.color = cvet;
th.innerHTML = cvet;
}
</script>
) |
должно получиться следующее
вот так примерно должно выглядеть. просто у меня не меняется код цвета, т.к. несколько появляется мест куда он должен ставиться, если я правильно излагаю.. |
Цитата:
|
Мишка,
:) |
<span id="mySpan">text</span>
<ul id="myList">
<li>red</li>
<li>green</li>
<li>blue</li>
</ul>
<script>
window.onload = function() {
var span = document.getElementById('mySpan');
var list = document.getElementById('myList');
var len = list.children.length;
for (var i = 0; i < len; i++) {
list.children[i].style.background = list.children[i].innerHTML;
}
list.onmouseover = function (e) {
e = e || event;
var target = e.target || e.srcElement;
span.innerHTML = target.innerHTML;
span.style.color = target.style.backgroundColor;
}
list.onmouseout = function () {
span.innerHTML = 'text';
span.style.color = 'black';
}
}
</script>
|
пробую, спасибо
|
Цитата:
мне нужно менять не свойства и текст текущего элемента, а например (даже не например, а конкретно) всех элементов на странице у которых класс "text1". т.е. навожу мышой или тычу оной на определенный элемент, а скрипт мне на всей моей большой странице содержимое всех спанов с классом "текст1" меняет на "траляля", а для спана с классом "текст2" менят колор фонта на, к примеру, #d23 может есть что почитать(более локализованное в плане описания, но достаточно доступное) по поводу того к чему может обращаться яваскрипт, т.е. например по айди или document. и т.д. :cray: все примеры что вы приводили рабочие, но под себя не получается изменить.. находил что то в инете с использованием жквери, но тоже слегка не то и уже очень сложно разобраться имея нулевой уровень в яве. |
Цитата:
Вот на нем и можно будет показать как и чего. |
Цитата:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function (){
$('button').click(function (){
$('.text1').text('траляля');
$('.text2').css('background-color','#d23');
});
});
</script>
</head>
<body>
<button>Тыч сюда</button>
<span class='text1'>text1</span>
<span class='text2'>text2</span>
<span class='text2'>text2</span>
<span class='text1'>text1</span>
</body>
</html>
|
да я вроде писал пример.
вот рабочий вариант: <div class="text_mod"> первый спан (цвет<span id="text1">просто текст</span>) второй спан (<span id="text2" style="color: red; font-weight: normal;">ЦВЕТ :з)</span>) <br /> <div style="height:50px;"> <ul style="width: 100px;"> <li onMouseOver="text1.innerHTML='#300'; text2.style.color='#300';" style="background: #300"></li> <li onMouseOver="text1.innerHTML='#400'; text2.style.color='#400';" style="background: #400"></li> <li onMouseOver="text1.innerHTML='#500'; text2.style.color='#500';" style="background: #500"></li> <li onMouseOver="text1.innerHTML='#600'; text2.style.color='#600';" style="background: #600"></li> <li onMouseOver="text1.innerHTML='#700'; text2.style.color='#700';" style="background: #700"></li> <li onMouseOver="text1.innerHTML='#800'; text2.style.color='#800';" style="background: #800"></li> <li onMouseOver="text1.innerHTML='#900'; text2.style.color='#900';" style="background: #900"></li> <li onMouseOver="text1.innerHTML='#a00'; text2.style.color='#a00';" style="background: #a00"></li> <li onMouseOver="text1.innerHTML='#b00'; text2.style.color='#b00';" style="background: #b00"></li> <li onMouseOver="text1.innerHTML='#c00'; text2.style.color='#c00';" style="background: #c00"></li> <li onMouseOver="text1.innerHTML='#d00'; text2.style.color='#d00';" style="background: #d00"></li> <li onMouseOver="text1.innerHTML='#e00'; text2.style.color='#e00';" style="background: #e00"></li> <li onMouseOver="text1.innerHTML='#f00'; text2.style.color='#f00';" style="background: #f00"></li> </ul> </div> а здесь как мне надо, но т.к. использую айди, а не класс - всё перестает работать: <div class="text_mod"> первый спан (цвет<span id="text1">просто текст</span>) второй спан (<span id="text2" style="color: red; font-weight: normal;">ЦВЕТ :з)</span>) а это добавочные которые тоже должны меняться на те же что и первый спан - (цвет<span id="text1">просто текст</span>) <br /> <div style="height:50px;"> <ul style="width: 100px;"> <li onMouseOver="text1.innerHTML='#300'; text2.style.color='#300';" style="background: #300"></li> <li onMouseOver="text1.innerHTML='#400'; text2.style.color='#400';" style="background: #400"></li> <li onMouseOver="text1.innerHTML='#500'; text2.style.color='#500';" style="background: #500"></li> <li onMouseOver="text1.innerHTML='#600'; text2.style.color='#600';" style="background: #600"></li> <li onMouseOver="text1.innerHTML='#700'; text2.style.color='#700';" style="background: #700"></li> <li onMouseOver="text1.innerHTML='#800'; text2.style.color='#800';" style="background: #800"></li> <li onMouseOver="text1.innerHTML='#900'; text2.style.color='#900';" style="background: #900"></li> <li onMouseOver="text1.innerHTML='#a00'; text2.style.color='#a00';" style="background: #a00"></li> <li onMouseOver="text1.innerHTML='#b00'; text2.style.color='#b00';" style="background: #b00"></li> <li onMouseOver="text1.innerHTML='#c00'; text2.style.color='#c00';" style="background: #c00"></li> <li onMouseOver="text1.innerHTML='#d00'; text2.style.color='#d00';" style="background: #d00"></li> <li onMouseOver="text1.innerHTML='#e00'; text2.style.color='#e00';" style="background: #e00"></li> <li onMouseOver="text1.innerHTML='#f00'; text2.style.color='#f00';" style="background: #f00"></li> </ul> </div> как видно если добавляется доп айди слова "простой текст не меняются" а должны меняться на одно и тоже (ох.. чую запутал я еще больше вас) |
ksa,
не успел :) сейчас поразбираю ваш код! |
Цитата:
если не сложно напишите комменты к строкам скрипта. я не понимаю как он работает. :( вот мой нерабочий. поскольку языка не знаю - естественно не понимаю почему не работает.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ Без Имени</title>
<script type="text/javascript">
function izm(col){('document.text1').text(col);
$('document.text2').css('color', col);
}
</script>
</head>
<body>
<li onclick="izm('#0f0')" style="background: #f00">ad</li>
<span class='text1'>text1</span>
<span class='text2'>text2</span>
<span class='text2'>text2</span>
<span class='text1'>text1</span>
</body>
|
почему нельзя использовать вместо айди - класс? во втором примере поста #16
|
Мишка, я так понимаю аппетиты растут! :lol:
1000р на телефон и продолжаем консультацию... |
Цитата:
Почему у тебя используется какой=то "одинокий" <li>? |
ksa, :stop: Вы как один мой знакомый с отчеством Камилович )))
Огромное спасибо за помощь! для старта мне этого хватит. пойду азы читать яваскриптований. скомпоную как нибудь функцию свою. :) еще раз спасибо! |
Цитата:
|
Цитата:
я не особо глупый так то.. обычно то.. :) но бывает всякое, конечно )) а что собирался - так всё тоже самое как и все посты мои до этого в этой теме: пытался при наведении на определенный элемент изменить текст других некоторых с определенным классом и цвет некоторых третьих. |
Цитата:
|
Цитата:
|
Мишка, это?
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
function izm(color) {
$('.text1').text(color);
$('.text2').css('background-color',color);
};
</script>
</head>
<body>
<li onclick="izm('#0f0')" style="background: #f00">ad</li>
<span class='text1'>text1</span>
<span class='text2'>text2</span>
<span class='text2'>text2</span>
<span class='text1'>text1</span>
</body>
</html>
|
Цитата:
получается в последнем моем примере я не подгрузил жквери и написал документ. , а нужно было просто .текст1, а в целом (за исключением синтаксиса) мысль была правильная у меня как объединить коды предложенные? |
| Часовой пояс GMT +3, время: 20:09. |