How do I add style to my Feature (Vector LineString)?

Question

I'm confused how to go about adding style to my Feature which consists of a LineString which is inside a Vector. Do I add style to the LineString or the Vector? I want to change the color and size of the line and possibly make the line opaque if possible.

mapObject = new OpenLayers.Layer.Vector("Vector");
var p1 = new OpenLayers.Geometry.Point(mapObjectTopLeftLon, mapObjectTopLeftLat);
var p2 = new OpenLayers.Geometry.Point(mapObjectTopRightLon, mapObjectTopRightLat);
var p3 = new OpenLayers.Geometry.Point(mapObjectBottomRightLon, mapObjectBottomRightLat);
var p4 = new OpenLayers.Geometry.Point(mapObjectBottomLeftLon, mapObjectBottomLeftLat);
var p5 = new OpenLayers.Geometry.Point(mapObjectTopLeftLon, mapObjectTopLeftLat);

var pnt = [];
pnt.push(p1,p2,p3,p4,p5);

mapObject.addFeatures([new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(pnt))]);

map.addLayer(mapObject);

Answer 1

In fact you add style to the vector layer, in which the features are stored, in your case it is named mapObject (but should be something like featureLayer or myVectorLayer or so). Here you can find a blog about stylig the vector layer and OpenLayers.StyleMap would surely be useful in this case.

If you need more styles (you have many different features to distinguish), you can also change the style of individual features based on "rules" (OpenLayers.Rule) and with the help of OpenLayers.Filter.Comparison you can assign different symbolizers to your features. A shord example of the styling:

myOpenLayersStyles.commentLayer = new OpenLayers.StyleMap({  //creates style for the vectorLayer features
    "default": new OpenLayers.Style({
        pointRadius: 20,
        fillColor: "#0000ff",
        fillOpacity: 1,
        strokeColor: "#0000ff",
        strokeWidth: 3,
        strokeOpacity: .7,
        cursor: "pointer",
        cursor: "hand" 
    },{
        rules: [
           new OpenLayers.Rule({

                    filter: new OpenLayers.Filter.Comparison({
                        type: OpenLayers.Filter.Comparison.EQUAL_TO,
                        property: "completed", 
                        value: 1
                    }),

                    symbolizer: {
                        graphicHeight: 25,
                        externalGraphic: "Img/comment_completed.png"
                    }
                }),
                new OpenLayers.Rule({
                    filter: new OpenLayers.Filter.Comparison({
                        type: OpenLayers.Filter.Comparison.EQUAL_TO,
                        property: "completed",
                        value: 0
                    }),
                    symbolizer: {
                        externalGraphic: "Img/comment.png",
                        graphicHeight: 25

                    }
                })            
            ]
      }
   )
        });