Изменять размер шрифта относительно количества символов
Есть блок в котором. вписывается заголовок страницы h1, когда заголовок состоит из 2-3 слов, все выглядит шикарно но если слов блошье 20т то выглядит ужасно. Помогите найти или как так сделать чтобы если например символов было 20 то шрифт был 37pt но если больше 20 то он был равен 32и т.д
 |
<style>
h1 {
font-size: 40px;
}
</style>
<script>
function fix(h1) {
if (h1.innerHTML.length > 20)
h1.style.fontSize = '20px';
else if (h1.innerHTML.length > 10)
h1.style.fontSize = '30px';
}
</script>
<h1 onclick="fix(this);">Fix me plese</h1>
<h1 onclick="fix(this);">Fix me pleaseeeeeeeeeeeeeeeeeeeeeeeee</h1>
|
Спасибо все Работает, но только по нажатию на заголовок. Как сделать чтобы сразу все было сделанно
|
<body onload='fix("h1")'>
<style>
h1 {
font-size: 40px;
}
</style>
<script>
function fix(tagname) {
tegi=document.getElementsByTagName(tagname);
for(i=0;i<tegi.length;i++){
if (tegi[i].innerHTML.length > 20)
tegi[i].style.fontSize = '20px';
else if (tegi[i].innerHTML.length > 10)
tegi[i].style.fontSize = '30px';
}}
</script>
<h1>I'm fixed</h1>
<h1>Fix me pleaseeeeeeeeeeeeeeeeeeeeeeeee</h1></body>
можно так=) |
Dim@,nyols, спасибо вам вопрос решен все четко
|
Незачто:lol: :lol:
|
Как реализовать такой же скрипт для блока div?
Здравствуйте. Подскажите как реализовать такой же скрипт но только не для тега h1 а для блока div?
|
<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem unde assumenda voluptatem dolore. Ab, maxime! Tenetur fuga laudantium labore aperiam.</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, perspiciatis!</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor</div>
<script>
var size = [[20,20],[10,30],[5,40],[0,50]]; // [>=слов,размер]
document.querySelectorAll('div').forEach(el=>el.style.fontSize = size.find(s => s[0] <= el.textContent.split(/\s/).length)[1]+'px');
</script>
|
| Часовой пояс GMT +3, время: 16:13. |