Манипулировать предопределенным масштабом, у которого есть браузер в момент показывания моей страницы

Поскольку я могу манипулировать масштабом браузера используя стандарт HTML5, это проект основ компьютера и у меня нет большого количества опыта.

0
задан 07.08.2017, 19:13
1 ответ

Opci¦n, podr¦, - когда масштаб состоит в том, чтобы использовать свойство CSS , чтобы изменять tamaño / elemento/s, в которых estÃ: s заинтересованная сторона.

const div = document.getElementById('prueba');

function redimensionar(tamano) {
  div.style.zoom = tamano;
}
div#prueba {
  width: 150px;
  background-color: red;
  text-align: center;
}
<div id="prueba">
  Soy feliz y ya no necesito a mis padrinos mágicos
</div>

<button onclick="redimensionar(1);">
  Tamaño normal
</button>
<button onclick="redimensionar(2);">
  Aumentar
</button>
<button onclick="redimensionar(3);">
  Aumentar más
</button>

Это свойство не свойство, которое являлось бы стандартизированным. Именно из-за этого raz¦n например Firefox он не выносит ее.
podr¦, - чтобы пробовать использовать другие сходные альтернативы. Как podr¦, - когда его быть transform: scale (ширина, высота); завися случай.


Другая возможность, mÃ: s тоскливая, ser¦, - чтобы взбираться на средства элементов вручную.

const div = document.getElementById('prueba');

const anchoInicial = parseInt(getComputedStyle(div).getPropertyValue('width'));
const altoInicial = parseInt(getComputedStyle(div).getPropertyValue('height'));
const tamanoFuenteInicial = parseInt(getComputedStyle(div).getPropertyValue('font-size'));

function redimensionar(tamano) {
  div.style.width = `${anchoInicial * tamano}px`;
  div.style.height = `${altoInicial * tamano}px`;
  div.style.fontSize = `${tamanoFuenteInicial * tamano}px`;
}
div#prueba {
  width: 150px;
  background-color: red;
  text-align: center;
}

#prueba > p {
  margin: 0;
}
<div id="prueba">
  Soy feliz y ya no necesito a mis padrinos mágicos
</div>

<button onclick="redimensionar(1);">
  Tamaño normal
</button>
<button onclick="redimensionar(2);">
  Aumentar
</button>
<button onclick="redimensionar(3);">
  Aumentar más
</button>
2
ответ дан 29.10.2019, 23:56
  • 1
    Спасибо за время берет в ответе мне. – Cokóro R1 07.08.2017, 21:00

Теги

Похожие вопросы