У меня есть 2 div в моем html, и я хочу увеличить размер с помощью onclick, но fontSize не меняется.

Код:

function changeSize(id, weight, height)
{
with (document)
{
	if (getElementById(id).style.width = '240px'){
		getElementById(id).style.width = weight + 'px';
		getElementById(id).style.height = height + 'px';
		getElementById(id).style.fontSize = '30px';
	}	
	else {
		getElementById(id).style.width ='240px';
		getElementById(id).style.height ='300px';
		getElementById(id).style.fontSize = '18px';

	}
}
}
.kaesten{
	width:240px;
	height:300px;
	background-color:darkgrey;
	background-position:center;
	background-repeat:no-repeat;
	text-shadow:0px 0px 3px #000;
	border: 5px solid #F0F8ff;
	vertical-align:top;
	text-shadow: 3px 3px 4px #777;
	float:left;
	margin-left:30px;
}
<div id="box1" class="kaesten" onclick="maxi('box1', 600, 600); return false;">
test1

</div>

<div id="box2" class="kaesten">
test2
</div>

Вопрос: Как я могу изменить fontSize? И как я могу изменить размер div в исходный размер с помощью второго клика?

2
nolags 16 Дек 2015 в 13:16

3 ответа

Лучший ответ

Вы сделали опечатку. Свойства и методы в JavaScript чувствительны к регистру. Это метод getElementById, getElementByID.

Предполагая, что единственными встроенными стилями, которые есть в элементе, являются те, которые вы добавили в функцию выше, вы можете использовать следующее для удаления стилей и «сброса» элемента:

function changeSize(id, weight, height){
    var elem = document.getElementById(id);
    if(elem.getAttribute('style')){
        elem.removeAttribute('style');
    } else {
        elem.style.width = weight + 'px';
        elem.style.height = height + 'px';
        elem.style.fontSize = '30px';
    }
}

var elems = document.getElementsByClassName('kaesten');
for(var i = 0; i < elems.length; i++){
    elems[i].onclick = function(){
        changeSize(this.id, 600, 600);
    }
}
<div id="box1" class="kaesten">test1</div>
<div id="box2" class="kaesten">test2</div>

Еще лучше было бы просто передать элемент функции в качестве ссылки, а не передавать элементы id и снова запросить документ.

1
George 16 Дек 2015 в 10:49

Лучшее, что вы можете сделать в этом случае - это использовать 2 класса CSS и переключать их с помощью JavaScript. на каждом клике вы можете проверить, есть ли у него определенный класс, а затем переключить те,

.normal{
    width:240px;
    height:300px;
    background-color:darkgrey;
    background-position:center;
    background-repeat:no-repeat;
    text-shadow:0px 0px 3px #000;
    border: 5px solid #F0F8ff;
    vertical-align:top;
    text-shadow: 3px 3px 4px #777;
    float:left;
    margin-left:30px;
}

.maximize{
    width:4800px;
    height:600px;
    font-size:30px;
    background-color:darkgrey;
    background-position:center;
    background-repeat:no-repeat;
    text-shadow:0px 0px 3px #000;
    border: 5px solid #F0F8ff;
    vertical-align:top;
    text-shadow: 3px 3px 4px #777;
    float:left;
    margin-left:30px;
}

Вы можете переключиться с:

var class = document.getElementById("MyElement").className;
if(class === "normal"){
     document.getElementById("MyElement").className = "maximize";
} else {
     document.getElementById("MyElement").className = "normal";
}
1
Keyboard ninja 16 Дек 2015 в 10:40

Ошибка печати

getElementById(id).style.fontSize = '30' +'px';
             ^

Пожалуйста, проверьте это работает

function maxi(id, weight, height)
{
	with (document)
	{
		getElementById(id).style.width = weight + 'px';
		getElementById(id).style.height = height + 'px';
		getElementById(id).style.fontSize = '30' +'px';
		
	}
}
.kaesten{
	width:240px;
	height:300px;
	background-color:darkgrey;
	background-position:center;
	background-repeat:no-repeat;
	text-shadow:0px 0px 3px #000;
	border: 5px solid #F0F8ff;
	vertical-align:top;
	text-shadow: 3px 3px 4px #777;
	float:left;
	margin-left:30px;
}
<div id="box1" class="kaesten" onclick="maxi('box1', 600, 600); return false;">
test1

</div>

<div id="box2" class="kaesten">
test2
</div>
0
akash 16 Дек 2015 в 10:25