Как использовать поле ввода для изменения значения свойства css с помощью сценария java?

Question

Я хочу ввести значение свойства в поле ввода, например цвет.

И в другом поле ввода для нового стиля синий

let p_change = document.getElementById('p-change');
let property = document.getElementById('property').value; // each color ,fontSize
let newStyle = document.getElementById('style').value; 	// each  red , 20px
let change	 = document.getElementById('change');

change.onclick = function(){
	p_change.style.property = 'newStyle'; 
}

<p id="p-change">Change my style like you love</p>
		  		<input id="property" value="" placeholder="Enter Property">
				<input id="style" value="" placeholder="Enter New Style">
			  	<button id="change">Change</button>

введите описание изображения здесь

Answer 1

Вам нужно получить свойство и стили после нажатия кнопки.

Если вы получили их раньше, они будут пустыми строками.

Также используйте const, а не let. Не нужно использовать let в этом случае.

Также добавлена ​​небольшая проверка, чтобы увидеть, существует ли введенный property.

const p_change = document.getElementById('p-change');
const change = document.getElementById('change');

change.onclick = function() {
  const property = document.getElementById('property').value
  const newStyle = document.getElementById('style').value;

  // extra verification
  const style = p_change.style
  const findPropertyArr = Object.keys(style).filter(key => key === property)
  if (findPropertyArr.length > 0) {
    p_change.style[`${property}`] = `${newStyle}`;
    document.getElementById('error').remove();
  } else {
    p_change.innerHTML += '<p id="error" style="color:red">Invalid property name</span>'
  }
}

<p id="p-change">Change my style like you love</p>
		  		<input id="property" value="" placeholder="Enter Property">
				<input id="style" value="" placeholder="Enter New Style">
			  	<button id="change">Change</button>

Answer 2

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

Наш html может выглядеть следующим образом:

<form>
  <p id="p-change">Change my style like you love</p>
  <input id="property" value="" placeholder="Enter Property">
  <input id="style" value="" placeholder="Enter New Style">
  <button id="change" onclick="myFunction(event)">Change</button>
</form>

Следующая вещь это сделать нашу функцию в JavaScript, чтобы заставить вещи работать. Одно из возможных решений может выглядеть следующим образом:

function myFunction(event) {
  //prevent the default behavior of the browser 
  event.preventDefault();

  /*
  target is a property of the event interface witch points to the DOM-element you have clicked.
  form is a property of a DOM-element pointing to the form the element belongs to.
  */

  //grabbing the values
  const prop = event.target.form.querySelector("#property").value;
  const style = event.target.form.querySelector("#style").value;
  //assign it to #p_change
  event.target.form.querySelector("#p-change").style[prop] = style; 

}

В Интернете можно найти много информации, одной из вещей, которую я регулярно посещаю, является Сеть разработчиков Mozilla (ссылка) , И чтобы завершить это и сделать его более понятным, мы добавим его во фрагмент:

function myFunction(event) {
   //prevent the default behavior of the browser 
  event.preventDefault();
  
  /*
  target is a property of the event interface witch points to the DOM-element you have clicked.
  form is a property of a DOM-element pointing to the form the element belongs to.
  */
  
  //grabbing the values
  const prop = event.target.form.querySelector("#property").value;
  const style = event.target.form.querySelector("#style").value;
  //assign it to #p_change
  event.target.form.querySelector("#p-change").style[prop] = style; 
  
}

    <form>
      <p id="p-change">Change my style like you love</p>
      <input id="property" value="" placeholder="Enter Property">
      <input id="style" value="" placeholder="Enter New Style">
      <button id="change" onclick="myFunction(event)">Change</button>
    </form>

Answer 3

выбранные узлы имеют свойство style со свойствами css.

let node = document.querySelector('#someid')
node.style.color = 'red'
node.style.fontSize = '40px'