输入CSS属性，刷新后进行更改，仍然无法修复

Question

new to Javascript,and is learning CSS tricks recently,.I write the script below ,this code is used to change the text style instantly after refreshing according to the property and value you enter,but it won't work,and I can not sort it out. Javascript的新手，最近正在学习CSS技巧。我在下面编写脚本，该代码用于根据您输入的属性和值在刷新后立即更改文本样式，但是它不起作用，而且我不能梳理出来。

<?xml version="1.0" encoding="UTF-8"?>
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <title>CSS Dictionary</title>
        <script type="text/javascript">
            var property;
            var value;
            var paragraph;
            function property_convert(property)
            {   
                /*this function will change ,for example text-align to textAlign*/
                var index=property.indexOf('-');
                var firstString=property.substring(0,index);
                var middleString=property.substring(index+1,index+2).toUpperCase();
                var lastString=property.substr(index+2);

                var convertedProperty=firstString+middleString+lastString;
                return convertedProperty;
            }

            function getPropertyandValue_onclick()
            {

                property=document.getElementById('txtProperty').value;
                while(property.lastIndexOf('-') !=-1)
                {
                    property=property_convert(property);
                }

                value=document.getElementById('txtValue').value;
                paragraph=document.getElementById('paragraph');
                alert("Property:"+property+" Value:"+value);

            }
            function changeStyle_onclick()
            {
                paragraph.style.property=value; /*this code won't work ，change the property to */
            }

        </script>
        <style type="text/css">
            p{
                text-underline-position:below;
            }
        </style>
    </head>
    <body>
        <h1>See the change in the following two paragraphs</h1>
        <p id="paragraph">CSS is very useful in web designing,and a powerful tool when combining with JavaScript ,hope you will enjoy the show.<br />
        Forget the easy way,learn web design the hard way.</p>

        <br />
        <br />
        Property:
        <input type="text" id="txtProperty">
        Value:
        <input type="text" id="txtValue">
        <input type="button" id="txtAddPropertyValue" value="add this property" onclick="getPropertyandValue_onclick()">
        <input type="button" id="btnClick" value="click to see" onclick="changeStyle_onclick() ">

        <br />
        if you have something to tell me,please email me
        <a href="mailto:caozi542@gmail.com">caozi542@gmail.com</a>
    </body>
</html>

Answer 1

paragraph.style.property=value this will access the key "property" of style object and not the value of property, try this instead: paragraph.style.property=value这将访问样式对象的键“属性”，而不是属性的值，请尝试以下操作：

paragraph.style[property] = value;

EDIT: An example: 编辑：一个例子：

var obj = {
    prop1: "somevalue",
    prop2: "anothervalue",
    property: "thirdvalue"
}

var property = "prop1";

console.log(obj.property);   // => "thirdvalue"
console.log(obj[property]);  // => "somevalue"

输入CSS属性，刷新后进行更改，仍然无法修复

问题描述

1 个解决方案

解决方案1
1 2014-11-02 14:36:09

输入CSS属性，刷新后进行更改，仍然无法修复

问题描述

1 个解决方案

解决方案1 1 2014-11-02 14:36:09

解决方案1
1 2014-11-02 14:36:09