Изменение шрифта по раскрывающимся спискам вариантов. Javascript

Я пытаюсь изменить шрифт div с помощью селектора параметров.Изменение шрифта по раскрывающимся спискам вариантов. Javascript

так у меня есть DIV с текстом «привет люди» и я хочу, чтобы изменить семейство шрифтов либо font1 или font2 (или font3)

Но я не могу представить себе правильный путь, и я» m действительно запутывается, следует ли определять стили классами css или javascript referenc. Может кто-нибудь мне помочь?

<div id="output-text"> 
    hello folks 
</div 

    <label for="input-font"> 
Font 
</label> 
<br> 
<select id="input-font" class="input" onchange="changeFont (this);" size="2"> 

    <option selected ="selected"/> 
    Helvetica 

    <option /> 
    Arial 

</select> 
<br>

простой сценарий изменения шрифта будет, но я не могу собрать их вместе с этой опции выпадающего меню

function changeFont(){ 
    var userInput = document.getElementById('input-font').value; 
    document.getElementById('output_font').innerHTML = userInput; 

}

, но я предполагаю, что я совершенно неправильно здесь

источник

2014-12-16 user2607713

+10

Вы не отправляли свой 'функции changeFont'. – j08691

http://stackoverflow.com/questions/5195303/set-css-attribute-in-javascript –

Добавьте функцию, которую вы написали ('changeFont()'). Кроме того, на боковой ноте вы можете протестировать с помощью чего-то другого, кроме helvetica и arial, в качестве ваших вариантов - вы можете не видеть большой разницы. – Ted

Вот ваш пример очищен и работает.

<div id="output-text"> 
    hello folks 
</div> 

<select id="input-font" class="input" onchange="changeFont (this);"> 
     <option value="Times New Roman" selected ="selected">Times New Roman</option> 
     <option value="Arial">Arial</option> 
</select>

JavaScript

var changeFont = function(font){ 
    console.log(font.value) 
    document.getElementById("output-text").style.fontFamily = font.value; 
}

Теперь вы можете добавить столько шрифтов в списке в HTML, и он будет работать .. Рабочий пример здесь:

JSFIDDLE

источник

2014-12-16 15:56:16 Shaunak

Как вы не имеете опубликовал функцию changefont(), которую я не могу видеть, что вы пробовали в своем коде..Как ваш вопрос

Change Font by Option Dropdown Javascript

Вы можете просто создать элемент с и и изменить его размер шрифта, как

document.getElementById("theid").style.fontFamily = "Arial";

Вы можете использовать selectedIndex свойство извлечь выбранное значение из выпадающего списка.

Более подробную информацию о выборе значения из выпадающего списка задается here

источник

2014-12-16 15:42:08

Я думаю, что @ user2607713 также хочет знать, как получить часть «Arial» - то есть, как использовать выбранный элемент в раскрывающемся списке. – alex

@alex editted .. это достаточно ?? .. :) –

Я могу раскрыть принцип изменения шрифта как да ... но и не получают, как изменить его с большим количеством опций, как есть выпадающий список: -arial, -comic без, - ......... (извините я новичок в это, так что я» m просто полностью запутался в тот момент, когда число 1 + 1 вместе ... – user2607713

Вы вам нужно реструктурировать выбранный вами бит (используйте value="" в тегах <option>, чтобы передать имена шрифтов javascript - als o теги <option> нуждаются в некоторой работе, чтобы быть форматированным HTML-кодом), а затем определить функцию changeFont(). JSFIDDLE DEOM

<select id="input-font" class="input" onchange="changeFont()" size="2"> 
    <option selected ="selected" value="Helvetica">Helvetica</option> 
    <option value="Arial">Arial</option> 
    <option value="Times">Times</option> 
</select> 

function changeFont() { 
    var myselect = document.getElementById("input-font"); //get the input element and store in variable 'myselect' 
    var font = myselect.options[myselect.selectedIndex].value; //store the value="" of the selected element in variable 'font' 
    document.getElementById("output-text").style.fontFamily = font; //set 'output-text' element's font-family style to value in 'font' variable 
}

функция

альтернативы changeFont() с резервным шрифтом

function changeFont() { 
    var myselect = document.getElementById("input-font"); 
    var font = myselect.options[myselect.selectedIndex].value; 
    font = font + ", sans-serif"; //gives the font variable a backup font in-case the system lacks the selected font 
    document.getElementById("output-text").style.fontFamily = font; 
}

источник

2014-12-16 15:58:28 JRulle

Это может помочь

<!DOCTYPE html> 
    <html> 
    <head></head> 
    <body> 
    <script type="text/javascript"> 
    function changeFont(str){ 
     document.getElementById("output-text").setAttribute("style", "font-family:"+str+";"); 
    } 
    </script> 
    <div id="output-text"> 
     hello folks 
    </div> 

    <label for="input-font"> 
    Font 
    </label> 
    <br> 
    <select id="input-font" class="input" onchange="changeFont(this.value);"> 
     <option value="Georgia" selected ="selected">Georgia</option> 
     <option value="Arial" >Arial</option> 
    </select> 
    </body> 
    </html>

источник

2014-12-16 16:02:09

Изменение шрифта по раскрывающимся спискам вариантов. Javascript

ответ

Смежные вопросы