шрифт, размер шрифта и изменение цвета javascript

-1

Я пытаюсь сделать этот код измененным шрифтом, шрифтом шрифта и цветом с помощью кнопки onclick, но я не могу заставить его работать, это то, что у меня есть до сих пор. и я застрял. у кого есть идеи?шрифт, размер шрифта и изменение цвета javascript

<html> 
    <head> 
     <meta charset=utf-8 /> 
     <title>Change Paragraph Text</title> 
    </head> 
    <body> 
     <p id ='text'>I am going to change this text, I hope.</p> 
     <div> 
     <button id="jschange" onclick="DoAll">Style</button> 
     </div> 
     <script type="text/javascript"> 
     var style = 'text'; 
     function DoAll() { 
      One(document.write.style.big()); 
      Two(document.write.style.fontsize(7)); 
      Three(document.write.style.fontcolor("red")); 
     } 
     </script> 
    </body> 
</html>

источник

2015-01-27 Piratica

Серьезно, где вы узнали о 'style' с' document.write'? – Arvind

преподавание моей личности для класса, поэтому различные веб-сайты, которые, по-видимому, говорят мне не то, что у вас есть, предлагают lol – Piratica

<!doctype html> 

<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title></title> 
    </head> 
    <body> 
    <p id="style-target">This is the element which will change.</p> 
    <button id="change-styles">Change Styles</button> 
    <script> 

     window.onload = function() { 
     var changeStyles = query("#change-styles"); 
     var target = query("#style-target"); 

     changeStyles.onclick = function() { 
      style(target, "fontSize", "18px"); 
      style(target, "color", "blue"); 
      style(target, "fontWeight", "bold"); 
     }; 
     }; 

     function style (el, property, value) { 
     el.style[property] = value; 
     } 

     function query (selector) { 
     return document.querySelector(selector); 
     } 
    </script> 
    </body> 
</html>

Посмотрите:

Я взял на себя смелость добавить остальные «необходимые» биты и фрагменты HTML (там, в частности, DOCTYPE). Теперь вам не нужно знать, для чего это нужно, но в будущем это решит множество проблем, если вы всегда включаете его в начало каждой страницы HTML, которую вы пишете, если вы намерены настоящих людей использовать эту (в основном, Internet Explorer < IE10 сосать меньше).

Я разбил это на бит, которые немного более разумны, с точки зрения реального JavaScript.

В большинстве языков программирования вы хотите разбить свой код на меньшие бит, чтобы было легче читать и работать.
JavaScript на самом деле не сильно отличается.

Я сокрушил друг от друга, кроме акта настройки стиля, в свою вспомогательную функцию

el.style.color = "purple"; // takes `el` and makes an el{color:purple} rule

Подвох в том, что любой CSS «стиль», который имеет дефис («размер шрифта», " background-color ") необходимо использовать camelCase при установке значения в JavaScript.

el.style.backgroundColor = "black";

Я создал вспомогательную функцию, называемую style, которую я потом сослаться внутри моего window.onload кода.

В этом конкретном случае я не много экономию, с точки зрения того, что я набираю (на самом деле, я набираю больше), но что бы это спасло меня в более сложном случае, это шанс пропустить что-то, повторить себя или скопировать/вставить ...

Итак, позвонив style(el, "fontWeight", "bold"); Мне не нужно помнить, как установить стиль для старых браузеров, в сравнении с новыми браузерами, в сравнении со стилями которые были установлены с использованием JS ранее, по сравнению с теми, у кого нет (тема для людей, занимающихся профессиональными веб-сайтами, которые должны работать в древних браузерах).

Если вы посмотрите внутри определения для style, которое я написал, вы увидите, что я звоню el.style[property]; Обычно, когда мы знаем имя вещи, которую мы ищем, на объекте, мы используем точку для их разделения. person.name; //"Bob".
В тех случаях, когда мы можем искать разные свойства, мы используем [<property-name>] для их разделения.

var property = "age"; человек [имущество]; // 32

Далее я использую document.querySelector(selector);, чтобы найти элементы, которые я хочу, передав ему селектор в стиле CSS.

document.querySelector работает практически со всеми браузерами за последние 6 лет.

Я захватываю элемент, я хочу изменить стили, и я захватываю элемент, который я слушаю (ожидая, когда пользователь щелкнет).

Затем я устанавливаю кнопку onclick на функцию, которая будет сбрасывать кучу изменений, которые я указываю.
В этом случае onclick изменит некоторые стили.

Обычно вы не хотите использовать onclick или подобные им подобные; обычно вы хотите использовать процесс под названием event-registration или «прослушивание», но это слишком далеко, для такого простого примера.

На данный момент, возьмите элементы, отделите детали реализации «как это сделать» от «когда», «Время выполнения X» делает «Y», и наблюдают за магией.

Смешные достаточно, это не намного больше кода, чем предложение JQuery, представленной в другом ответе ...

... но это в целом, гигантская библиотека, вы должны загрузить (если вы даже разрешено), просто чтобы выбрать вещь и изменить ее стили.
Кроме того, используя «решение jQuery» для общих проблем, вы часто изучаете вредные привычки или, альтернативно, не изучаете хороших привычек, которые вам нужно изучить, если бы у вас не было быстрого и легкого решения перед вами ,
jQuery, как используется большинством людей, особенно плохо относится к эталонному кэшированию (или к его отсутствию). Если широко используемые шаблоны jQuery используются на веб-сайте производства, без мысли, вложенных в них (особенно если вы не используете jQuery, но некоторые другие библиотеки), вы можете убить производительность своего сайта.

источник

2015-01-27 05:15:22 Norguard

Я думаю, что вы должны сделать это так:

<html> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    </head> 
    <body> 
    <p id ='text'>I am going to change this text, I hope.</p> 
    <div> 
     <button id="jschange" onclick="DoAll()">Style</button> 
    </div> 

    <script> 
     function DoAll() { 
     $('#text').css('font-size', '7').css('color', 'red'); 
     } 
    </script> 
    </body> 
</html>

источник

2015-01-27 04:34:15

Блоки кода сами по себе не являются обычно полезными ответами. Пожалуйста, объясните, что показывает код, который вы показываете, и почему/как этот код отвечает на вопрос. –

Попробуйте это вместо того, что JS код:

var sstyle = 'text'; 
function DoAll() { 
    var elem = document.getEelementById(sstyle); 
    elem.style.fontSize = "7px"; 
    elem.style.color= "red"; 
}

источник

2015-01-27 04:35:26 OnlyMAJ

Вы можете попробовать это:

<!DOCTYPE html> 
<html> 
    <body> 

    <p>Click the button to display a string in a specified size.</p> 
    <button onclick="myFunction()">Try it</button> 
    <p id="demo"></p> 

    <script> 
     function myFunction() { 
      var str = "Hello World!"; 
      var result = str.fontsize(7); 
      document.getElementById("demo").innerHTML = result; 
     } 
    </script> 
    </body> 
</html>

источник

2015-01-27 04:38:49 Neminath

Try это, это гораздо более простой подход и не будет что глаз обрез:

<button onclick="restyle()">Click me to see some results</button> 

<p id="changeable">Text that will change.</p> 

<script> 
    function restyle() { 
     var element = document.getElementById("changeable"); 
     element.style.fontsize(7); 
     element.style.fontcolor("red"); 
     element.innerHTML = "changed text"; 
    } 
</script>

Я все еще учусь Javascript тоже, так что если есть какие-то эксперты там я хотел бы услышать, что они думают! :)

источник

2015-01-27 04:48:17

спасибо, я работаю над этим с этим, надеюсь, он работает lol – Piratica

шрифт, размер шрифта и изменение цвета javascript

ответ

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