如何在php变量中存储css代码以与Javascript一起使用

Question

I'm developing a product and one of the options I will provide is the ability to copy and paste your own CSS gradient code from reliable sources such as ColorZilla .

How can I save such code in a PHP object (for use as default settings) and output it within javascript/jquery code while retaining the programming sense of the code. I have tried using "addslashes()" to no avail.

At the moment, I've got:

$default_options = array(
        'header_wrap_grad'          =>          '
                                            background: rgb(169,3,41); /* Old browsers */
                                            background: -moz-linear-gradient(top,  rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6+ */
                                            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1))); /* Chrome,Safari4+ */
                                            background: -webkit-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10+,Safari5.1+ */
                                            background: -o-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Opera 11.10+ */
                                            background: -ms-linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* IE10+ */
                                            background: linear-gradient(top,  rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C */
                                            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#a90329\', endColorstr=\'#6d0019\',GradientType=0 ); /* IE6-9 */
                                            ',

Then later on within the tags Ive got :

$('#header-wrap-grad').attr('value', '<?php echo addslashes($default_options['header_wrap_grad']); ?>');

with #header-wrap-grad being the textarea that I'm trying to populate with the css code from the variable. However, this isn't working. Im getting this error "Unexpected token :" when I try to echo out the variable.

Can someone point me in the right direction please?

Thanks.

Answer 1

您正在创建JavaScript字符串，因此请使用json_encode（并且不包含引号）：

$('#header-wrap-grad').attr('value', <?php echo json_encode($default_options['header_wrap_grad']); ?>);

Answer 2

You have problems with the line-breaks inside the string, they will break the JS-code.

You may encode the string in PHP with rawurlencode and decode the string in JS with decodeURIComponent.

$('#header-wrap-grad')
 .attr('value', 
    decodeURIComponent('<?php echo rawurlencode($default_options['header_wrap_grad']); ?>'));