Мне было интересно, можно ли редактировать свойства css в событии onchange.
Мой скрипт HTML +
<div class="Content">
<input id="ColorSlider" type="range" min="0" max="360" value="25" onchange="showValue(this.value)"/>
<div id="ColorViewer">
Color value = 25
</div>
<script>
function showValue(newValue){
document.getElementById("ColorViewer").innerHTML= "Color value = " + newValue;
//something here that sends the value to the css file
}
И мой CSS, который теперь получает переменные сеанса из другого PHP файла
<?php
header('Content-type: text/css');
session_start();
$CssBorder = $_SESSION['CssBorder'];
$CssH1BackgroundColor = $_SESSION['CssH1BackgroundColor'];
?>
Можно ли отправить переменную (возможно, через сеанс PHP) в файл CSS. и изменить цвет границы HTML?
Для цели очистки я хочу, чтобы мой css файл был внешним.
Для этого вам действительно не нужно использовать PHP. Это можно сделать с помощью javascript.
<script>
function showValue(newValue){
document.getElementById("ColorViewer").innerHTML= "Color value = " + newValue;
//something here that sends the value to the css file
document.getElementById("ColorViewer").style.border = "[width] [style] [colour]";
}
</script>
Если, однако, вы абсолютно должны динамически загружать созданную внешнюю таблицу стилей, тогда вам может понадобиться следующая ссылка, использующая jQuery:
Как загрузить файлы CSS с помощью Javascript?
Также ваш PHP файл CSS, вероятно, лучше реагирует с использованием переменных $_GET[]
а не $_SESSION[]
, поскольку вы не сможете установить переменную сеанса из HTML-кода пользователя.
Если вы хотите взять данные с сеанса, вы можете следовать с AJAX.
function showValue(newValue){
$("#ColorViewer").html("Color value = " + newValue);
$.get("sessionpage.php",function(data,status){ //print green,blue from session, seperated using comma.
var colors = data; //"green,blue";
var colorsArray =colors.split(",");
var CssBorder = colorsArray[0];
var CssH1BackgroundColor= colorsArray[1];
$("#ColorViewer").css('background-color', CssH1BackgroundColor);
$("#ColorViewer").css("border","5px solid");
$("#ColorViewer").css("border-color",CssBorder );
});
}
Для изменения цвета с помощью jquery
function showValue(newValue){
$("#ColorViewer").html("Color value = " + newValue);
$("#ColorViewer").css('background-color', "green");
$("#ColorViewer").css("border","5px solid blue");
}
Самый простой способ - включить требуемый css в html-страницу. Вы можете использовать немного javascript, чтобы все было сделано. Если вам нужно сохранить css во внешнем файле, вам нужно будет сгенерировать его с помощью PHP. Затем отправьте цвет обратно на сервер, заново создайте файл css и снова выполните страницу. Кажется немного сложным имхо.